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.
The 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
The Code is as follows: