1 of the pop-up layer: jquery. boxy (1)

Boxy is a jquery-based pop-up layer plug-in. It has a relatively beautiful appearance and complete functions. It supports IFRAME and mode windows, but it is obviously bulky compared with blockui, however, it is not easy to use.

1. Download and modify the plug-in

You can download to the latest version (http://plugins.jquery.com/files/boxy-0.1.4.zip) on the official website, to me to write these words when the latest version is 0.1.4 version, download unzip there is a main JS file: jquery. boxy. JS; 1 CSS file; 4 images are used to form the four rounded corners of the pop-up layer. Import the file to the system, modify boxy.css, and change the following image path to the actual position in the project. If the settings are incorrect, the image will become invalid, which makes it ugly.

 

/* Change the image to the path of the image file relative to the CSS file. */
. Boxy-wrapper. Top-left { Background : URL ('../images/boxy-nw.png ') ;   }
. Boxy-wrapper. Top-Right { Background : URL ('../images/boxy-ne.png ') ;   }
. Boxy-wrapper. Bottom-Right { Background : URL ('../images/boxy-se.png ') ;   }
. Boxy-wrapper. Bottom-left { Background : URL ('../images/boxy-sw.png ') ;   }

/* Note: The following path must be in the absolute path or URL format. */
/* The absolute path starts with '/', indicating the domain name. Note the virtual directory when using it. The path of the/Domain Name/image on the site cannot be omitted. */
/* URL indicates the appearance of http://www.xxx.com/xxx.png. */
. Boxy-wrapper. Top-left { # Background : None ; # Filter : Progid: DXImageTransform. Microsoft. alphaimageloader (src = '/images/boxy-nw.png ') ;   }
. Boxy-wrapper. Top-Right { # Background : None ; # Filter :Progid: DXImageTransform. Microsoft. alphaimageloader (src = '/images/boxy-ne.png ') ;   }
. Boxy-wrapper. Bottom-Right { # Background : None ; # Filter : Progid: DXImageTransform. Microsoft. alphaimageloader (src = '/images/boxy-se.png ') ;   }
. Boxy-wrapper. Bottom-left { # Background : None ; # Filter : Progid: DXImageTransform. Microsoft. alphaimageloader (src = '/images/boxy-sw.png ') ;   }

2. reference the plug-in to the page

< Script SRC = "Http://www.cnblogs.com/Contents/JS/jquery-1.5.js" Type = "Text/JavaScript" > </ Script >
< Link Href = "Boxy.css" REL = "Stylesheet" Type = "Text/CSS"   />
< Script SRC = "Jquery. boxy. js" Type = "Text/JavaScript" > </ Script >

3. Bind The boxy action to the matched element

<SCRIPT type = "text/JavaScript">
$ ( Function (){
$ (". Boxy"). boxy ();
});
</SCRIPT> < A Href = "# M1" Class = "Boxy" Title = "This is the title of the hyperlink" > 3.1 click here to bring up a dialog box </ A >
< Div ID = "M1" Style = "Display: none" > I came up with a hyperlink. </ Div >

 

If the title in tag a is not set, the pop-up box will have no title and cannot be dragged; the anchor M1 behind href is the corresponding element ID to be popped up; if the displayed element is set to none by default, it is displayed in the pop-up window. 3.2. The specified page content is displayed.

<SCRIPT type = "text/JavaScript">
$ ( Function (){
$ (". Boxy"). boxy ();
});
</SCRIPT>

< A Href = "../Default. aspx" Class = "Boxy" Title = "Prompt" > 3.2 load a document and display it as a prompt </ A >

 

Href hyperlink to the file to display content.

 3.3. The confirmation box is displayed during submission.

<SCRIPT type = "text/JavaScript">
$ ( Function (){
$ (". Boxy"). boxy ();
});
</SCRIPT> < Form Class = "Boxy" Action = "Default.html" Method = "Post" >
< Input ID = "Submit1" Type = "Submit" Value = "3.3. the pop-up layer is displayed during submission" />
</ Form >

 

 

Note:
1. The boxy dialog box automatically calculates the size and position of the content area. It is not necessary to specify the size of the package set;
2. In the preceding simple usage method, the message attribute is indirectly specified in the boxy. The message attribute is displayed in the pop-up box. The default value is "Please confirm :"
3. Each matching anchor title attribute will be used as the title of the corresponding dialog box.
4. The display attribute of message content is set to block (displayed as a block)

 

Download this example