Detailed analysis of the usage of JQUERY dialog_jquery

Today I used client-side dialog boxes and learned about the dialog boxes in jQuery UI.

Prepare jQuery environment

First, we create a button. When this button is clicked, a dialog box will pop up.

In order to set the click event of this button, you need to prepare the jQuery environment.

Set the click event of the button in ready.

Copy code The code is as follows:

$(function() {
// Initialization
$("#btn").click(function() {
alert("btn was clicked!");
}
);

Confirm There is no problem with this step. Prepare the dialog box

The second step is to prepare the content of the dialog box. This content comes from the jQuery UI demo files.

Copy code The code is as follows:

                                                                        ​ ;
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.

Copy code The code is as follows:

$(function() {

// Initialization
$("#btn").click(function() {
alert("btn was clicked!");
});

// Initialization dialog box
$("#dialog-confirm").dialog();
});


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.

Copy code The code is as follows:

 

  
These items will be permanently deleted and cannot be recovered. Are you sure?

Then, when initializing the dialog box, it will not be displayed, and only the initialization work will be completed.

When initializing the dialog box, pass a parameter autoOpen: false

Copy code The code is as follows:

$("#dialog-confirm").dialog(
{
autoOpen: false
}
);

in the click event of the button , this dialog box pops up.

Copy code The code is as follows:

$("#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:

Copy code The code is as follows:

$("#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.

Copy code The code is as follows:

// Initialization dialog box
$("# dialog-confirm").dialog(
{
modal: true, "Ok": function() {
              $(this).dialog('close');
                                                                                                                                          🎜> }
});