Pop-up layer 1: JQuery.Boxy (1) Introduction to use_jquery
WBOY
Release： 2016-05-16 18:01:09
Original
1117 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.
/* 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'); }
If the title in the a tag is not set, the pop-up box will have no title and cannot be dragged; the anchor mark m1 after the href is the corresponding element id to be popped up; the displayed element defaults if it is set to none The popup will set the display. < ;script type="text/javascript">
$(function() { $(".boxy").boxy(); }); < ;a href="../default.aspx" class="boxy" title="Prompt">3.2. Load a document and display the prompt message
href hyperlink to the file whose content you want to pop up.
3.3. A confirmation box will pop up when submitting
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
