; These items will be permanently deleted and cannot be recovered. Are you sure?
In order to use jQuery UI dialog box, you need to add references to these files.
Add style Used in jQuery UI To decorate a large number of styles, you need to reference the styles of jQuery UI. Note that the jquery.ui.all.css file refers to a large number of other style files. Copy the contents of the development-bundlethemesbase folder in jQuery UI.
In the ready function, this dialog box is also initialized.
Now, when you open this page, you can already see the dialog box.
Pop up a dialog box through a buttonWe hope that this dialog box will not be visible when the page is initialized, and will appear again when the button is clicked. Then these tasks are needed.
First add a style to the dialog box that is not displayed by default. style="display: none", so this part will not be seen by default.
$("#btn").click(function( ) { // alert("btn was clicked!"); $("#dialog-confirm").dialog("open"); });
If close is passed, the dialog box will be closed.
Implementing modal dialog boxes In practical applications, we often need to implement modal dialog boxes. In the Web, we need to add a mask layer to block the underlying elements and simulate the modal effect. This can be done when initializing the dialog box. , pass a parameter modal: true to achieve. The modified initialization code becomes:
$("#dialog -confirm").dialog( { modal: true, // Create a modal dialog box autoOpen: false, // Only initialize, do not display } );
Add buttons to the dialog box You can add any buttons to the dialog box and customize the event handling of the buttons. We first add two buttons, one OK and one Cancel, and let them close the dialog box first.
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
