jquery Pop-up plugin jquery.ui.dialog usage Analysis _jquery

This example describes the jquery pop-up plugin jquery.ui.dialog usage. Share to everyone for your reference, specific as follows:

1. Jquery.ui.dialog

Official Address http://jqueryui.net/dialog/

Jquery.ui.dialog is a very flexible mode box with its official address: Http://docs.jquery.com/UI/Dialog

2. File references

To use Jquery.ui.dialog, you need to reference two files, one is JS, and the other 1 are CSS

Add in Contentpage:

<script type= "Text/javascript" src= "/content/ui.js" ></script>

Add in MasterPage:

<link href= "Jquery-ui.css" rel= "stylesheet" type= "Text/css" >

3. How to use

Jquery.ui.dialog compared to Thinkbox to have an advantage, Thinkbox is specified in the $.ready, resulting in the expansion of the pop-up popup can not be flexible timing, for a logical judgment, a case of pop-up, the other does not eject, Thinkbox lacks the ability to strain, whereas Jquery.ui.dialog () uses $ (' ... '). Dialog (..); Way to make the pop-up more flexible

1 Pop-up Simple dialog box

$ ("#dialog"). Dialog ();

2 Pop-up Mode dialog box

$ ("#dialog"). Dialog ({modal:true});

3 pop-up Mode dialog box with mask effect

Copy Code code as follows:

$ ("#dialog"). Dialog ({modal:true, overlay: {opacity:0.5, background: "Black"});

4) with OK and Cancel button

Copy Code code as follows:

$ ("#dialog"). Dialog ({buttons: {"OK": function () {alert (' OK ');}, ' Cancel ': function () {$ (this). dialog (' Close ');}} );

5 How to close the dialog box

$ ("#dialog"). Dialog ("Close");

 <! DOCTYPE html>  
 

<! DOCTYPE html>
 
 

JQuery Boxy

Use this jquery plugin

To use the jquery plug-in, you need to put $ (selector). Boxy () in Document.ready. Replace the "selector" here with the appropriate selector expression, for example: "A[rel=boxy],form.with-confirmation". This will attach some behavior to the matching element, as follows:

① an HREF attribute if the anchor point contains #, the contents of the DOM element of the ID corresponding to this anchor point are added to the boxy dialog box.

② if the href anchor content is something else, an attempt is made to load its corresponding content using AJAX. Ideally, we have the same origin check and delegate Cross-domain request to the framework. This will be shown below.

A confirmation message for the submit mode is displayed on the ③ form.

How to use

Use the three files in the download package!

<script type = "Text/javascript" src = ". /js/jquery.boxy.js "> </script>
<link rel = "stylesheet" href = ". /css/boxy.css "type =" Text/css "/>

Basic Plug-in usage:

<script type= "Text/javascript" >
$ (function () {$ (". Boxy"). Boxy ();
</script>

Note that the Boxy dialog box automatically calculates the size and location of your content area, and there is no need to specify the size of the wrapper set.

<link rel = "stylesheet" href = ". /css/common.css "type =" Text/css "/>

More interested readers of jquery-related content can view the site topics: "jquery Extended Tips," "jquery common Plug-ins and Usage summary", "jquery drag-and-drop effects and tips summary", "jquery table (table) Operation Tips Summary", " A summary of Ajax usage in jquery, a summary of common classic effects in jquery, a summary of jquery animation and special effects usage, and a summary of jquery selector usage

I hope this article will help you with your jquery programming.