1 of the pop-up layer: JQuery. Boxy (1) Introduction

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.
Copy codeThe Code is as follows:
/* Change the image here 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 '/' to indicate the domain name. When using the absolute path, pay attention to the virtual directory. It cannot be omitted./The domain name/image path in the site */
/* Url indicates the form 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
Copy codeThe Code is as follows:
<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
Copy codeThe Code is as follows:
<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 am 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.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ (". Boxy"). boxy ();
});
</Script> <a href = ".. /default. aspx "class =" boxy "title =" tip "> 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.
Copy codeThe Code is as follows:
<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