Pop-up layer 1: JQuery.Boxy (1) Introduction to use

Pop-up layer 1: JQuery.Boxy (1) Introduction to use_jquery

WBOY

Release： 2016-05-16 18:01:09

Original

1098 people have browsed it

1. Download and modify the plug-in
You can download the latest version from the official website (http://plugins.jquery.com/files/boxy-0.1.4.zip), go to me When writing these words, the latest version is version 0.1.4. After downloading and unzipping, there is 1 main js file: jquery.boxy.js; 1 css file; and 4 pictures used to form the 4 rounded corners of the pop-up layer. . Introduce the file into the system, modify boxy.css, and change the image path below to the actual location in the project. If the setting is incorrect, the image will become invalid and it will be ugly.

Copy code The code is as follows:

 
/* Modify the image here to be relative to css The path to the image file of the 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 form of absolute path or url +/ //www.xxx.com/xxx.png appears*/ 
.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. Plug-in referenced to the page 

Copy code The code is as follows:

3 , bind the boxy behavior to the matching element

Copy the code The code is as follows:

3.1. Click me and a dialog box will pop up

$(function() {
$(".boxy").boxy();
});
< ;a href="../default.aspx" class="boxy" title="Prompt">3.2. Load a document and display the prompt message