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

Source: Internet
Author: User
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:


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.