The usage of JQUERY dialog is explained in detail

Today used the client dialog box, the jQuery UI dialog box to learn.

Prepare jQuery environment

First, we create a button that pops up with a dialog when clicked.

< Input type="button" value=" delete "id=" BTN" />

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

< The script type = "text/javascript" SRC = "scripts/jquery - 1.4.2. Js" > < / script>

Set the button's click event in ready.

 $(function() {
    //Initialize the
    $("#btn").click(function() {
        alert("btn  It's clicked! ");
   }
 );

Make sure there are no problems with this step.

Preparation dialog box
The second step is to prepare the contents of the dialog box. This is from the jQuery UI demo.

 <div id="dialog-confirm" title="Empty the recycle bin?" >
         <p>
             <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
             These items will be permanently deleted and cannot be recovered. Are you sure?</p>
 </div>

In order to use the jQuery UI dialog, you need to add references to these files.

  < Script type = "text/javascript" SRC = "scripts/jquery. UI. Core. Js" > < / script>
  < Script type = "text/javascript" SRC = "scripts/jquery. UI. Widget. Js" > < / script>
  < Script type = "text/javascript" SRC = "scripts/jquery. UI. Mouse. Js" > < / script>
  < Script type = "text/javascript" SRC = "scripts/jquery. UI. Button. Js" > < / script>
  < Script type = "text/javascript" SRC = "scripts/jquery. UI. Draggable. Js" > < / script>
  < Script type = "text/javascript" SRC = "scripts/jquery. UI. Position. Js" > < / script>
  < Script type = "text/javascript" SRC = "scripts/jquery. UI. Dialog. Js" > < / script>

Increase the style
JQuery UI is decorated with a lot of styles, so we need to refer to the styles of jQuery UI. Notice that the file jquery.ui.all.css refers to a lot of other style files. Copy the contents in the jQuery UI from the folder \development-bundle\themes\base.

< Link type="text/ CSS "href="styles/jquery.ui.all.css" rel="stylesheet" />

In the ready function, the dialog box is also initialized.

 $(function() {
     //Initialize the
     $("#btn").click(function() {
         alert("btn  It's clicked! ");
     });

     //Initialize the dialog 
     $("#dialog-confirm").dialog();
 });

Now, when you open the page, you can see the dialog box.

Add a default style to the dialog box. Style ="display: none" so that by default you don't see this part.

 <div id="dialog-confirm" title="Empty the recycle bin?" style="display: none">
     <p>
         <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
         These items will be permanently deleted and cannot be recovered. Are you sure?</p>
 </div>

Then, when the dialog box is initialized, it is not displayed, and the initialization is done.

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

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

In the button click event, the dialog box pops up.

 $("#btn").click(function() {
     //Alert (" BTN is clicked! ") );
     $("#dialog-confirm").dialog("open");
 });

Passing close closes the dialog box.

Implementation mode dialog box
In practice, we often need to implement the mode dialog box, in the Web need to add a mask layer to block the underlying elements, simulate the effect of the mode, this can be initialized in the dialog box, pass a parameter modal: true to achieve. The modified initialization code becomes:

 $("#dialog-confirm").dialog(
     {
         modal: true,             //Create a pattern dialog box
         autoOpen: false,         //Initializes, not displays
      }
 );

Add a button to the dialog box
You can add arbitrary buttons to the dialog box and customize button event handling. Let's add two buttons, one ok, one cancel, and let them close the dialog first.

 //Initialize the dialog box
 $("#dialog-confirm").dialog(
 {
     modal: true,             //Create a pattern dialog box
     autoOpen: false,
     buttons: {
         "Ok": function() {
              $(this).dialog('close');
         },
         "Cancel": function() {
             $(this).dialog('close');
         }
     }
 });