There are still many applications for pop-up layers, such as login and some operations on the same page. Others' belongings belong to others, and your own belongs to you, so I have always wanted to write a pop-up layer plug-in. Without further ado, let’s get started!
1: Mask layer
To pop up a layer, you must first use a mask layer to block the page below. This mask layer is full screen and the page needs to scroll, so set position: fixed; it also has a transparency effect. Here is my definition The mask layer css is named mask
.mask
{
position: fixed;
width: 100%;
height: 100%;
background-color: white;
Overflow: scroll;
Filter: alpha(opacity=50);
-moz-opacity: 0.5;
Opacity: 0.5;
z-index: 20;
Overflow: auto;
top: 0px;
Right: 0px;
}
2: Main parameters of the plug-in
tag: Why do you need tag? You can use tags to specify hidden elements that need to be popped up. You can specify tags as the selector "#*", so that the specified elements can be popped up. Here I set the default to this.
mainContent: Is this parameter required? I don't think it's very useful. I set it mainly for server controls. If all are added to the body, the form cannot be submitted. But after clicking submit, the page will refresh and the pop-up layer disappears, so I think it is still useless...
$.fn.xsPop = function (options) {
var defaults = {//Default value
title: "Pop-up window", //Window title
width: 500,
Heigth: 400,
tag: this, //Pop up the elements that need to be loaded
close: "Close",
mainContent: "body"//Container, in order to submit the form, but submit will refresh the page...
};
var options = $.extend(defaults, options); //Override with passed parameters
This.each(function () {
xsMain(options.title, options.width, options.heigth, options.tag, options.close, options.mainContent); //The main entrance of the plug-in
});
};
3: Use the xsMain function to add elements and bind events
There is a process here, which is to control the height and width. If the setting exceeds the screen height and width, it will adapt to the screen, thus preventing the pop-up layer from being too large to operate. The other is to add html normally, I use string addition
//According to the incoming data, add a mask layer and pop up a prompt box
Function xsMain(title, width, height, tag, close, mainContent) {
var divmask = "
";
$(mainContent).append(divmask);
var xsPop1 = " ";
var allHtml = xsPop1 xsPop2 xsPop3 xsPop5;
$(mainContent).append(allHtml);
$(tag).show();
$(tag).appendTo("#xsPopMain");
//Get the height and width of the browser and make subsequent judgments (height exceeds, dragging border limit)
clientHeight = window.screen.height;
clientWidth = window.screen.width;
If (height > clientHeight) {
height = clientHeight - 100;
}
If (width > clientWidth) {
width = clientWidth - 100;
}
$("#xsPop").css({
"heigth": height "px",
"width": width "px",
"margin-top": "-" (height / 2) "px",
"margin-left": "-" (width / 2) "px"
});
$("#xsPopMain").css("height", height - $("#xsPopHead").height());
xsdrag("#xsPopHead", "#xsPop"); //Bind drag action
$("#xsColse").bind("click", function () { ClosePop(tag, mainContent); }); //Bind close action
}
4: Close action
Here you need to give the tag to the container first, otherwise it will be removed together when you remove it later, and the tag will not be found the second time it pops up.
//Close the popup layer
Function ClosePop(tag, mainContent) {
$(mainContent).append(tag); //Save, otherwise $("#xsPop").remove() in step 4 will clear the tag
$(tag).hide();
$(".mask").remove();
$("#xsPop").remove();
}
5: Drag effect
Method 1: The first time I find it is an event that uses elements, but it is easy to lose elements and the effect is not ideal
Copy code The code is as follows:
//Drag and drop the pop-up layer (failed method, object loss will occur)
//Control is the drag element, tag is the action element, generally the control is within the tag
// function drag(control, tag) {
// // var isMove = false;
// var abs_x = 0, abs_y = 0;
// // $(control).mousedown(
// // function (event) {
// // var top = $(tag).offset().top;
// // var left = $(tag).offset().left;
// abs_x = event.pageX - left;
// // abs_y = event.pageY - top;
// // isMove = true;
}).mouseleave(function () {
// // isMove = false;
// // });
// // $(control).mouseup(function () {
// // isMove = false;
// // });
// // $(document).mousemove(function (event) {
// // if (isMove) {
// // $(tag).css({
// // 'left': event.pageX - abs_x $(tag).width() / 2 - 1,
// // 'top': event.pageY - abs_y $(tag).height() / 2 - 1
// //
// // }
// // return false;
// // });
// }
Method 2, the method I currently use, uses the down and up of the document, but there are still some problems, the problem of moving too fast, and the coordinates have a small jump
I also found a problem. If I drag the pop-up layer directly to the top of the screen and let go, haha, you will never be able to drag it back or click to close it. I took a look at the pop-up layer on Baidu's homepage. They also have this phenomenon, but after zooming in and out of the window, the pop-up layer will return to the center. I also tried to do this, but when I bound onresize, it appeared that it could not move to the bottom. The event they used was definitely not onresize. So I directly judged that the mouse position cannot be less than 0.
Copy code The code is as follows:
//Drag and drop pop-up layer
//Control is the drag element, tag is the action element, generally the control is within the tag
Function xsdrag(control, tag) {
$(control).mousedown(function (e)//emouse event
{
var offset = $(this).offset(); //The position of DIV on the page
var x = e.pageX - offset.left; //Get the distance between the mouse pointer and the left border of the DIV element
var y = e.pageY - offset.top; //Get the distance between the mouse pointer and the upper boundary of the DIV element
$(document).bind("mousemove", function (ev)//Bind the mouse movement event, because the cursor must also have an effect outside the DIV element, so the document event must be used instead of the DIV element event
{
If (EV.Pagey & Lt; = 0) {Return;} // Prevent the frame from being unable to close and drag
$(tag).css({
'left': ev.pageX - x $(tag).width() / 2, // I need to add this to my layout
‘top’: ev.pageY - y $(tag).height() / 2
});
});
});
$(document).mouseup(function () {
$(this).unbind("mousemove");
});
}
6: Style sheet
The layout of the pop-up layer uses top and left margin-top negative values, so I add half of the height and width in my js
.mask
{
position: fixed;
width: 100%;
height: 100%;
background-color: white;
Overflow: scroll;
Filter: alpha(opacity=50);
-moz-opacity: 0.5;
Opacity: 0.5;
z-index: 20;
Overflow: auto;
top: 0px;
Right: 0px;
}
.PopUp
{
Padding: 0px;
Position: absolute;
z-index: 21 !important;
Background-color: White;
Border-style: solid solid solid solid;
Border-width: 1px;
Border-color: #C0C0C0;
Left: 50%;
top: 50%;
}
.PopHead
{
Background-color: #F0F0F0;
Border-bottom-style: solid;
Border-bottom-width: 1px;
Border-bottom-color: #C0C0C0;
Height: 30px;
Cursor: move;
clip: rect(0px, auto, auto, 0px);
}
.PopHead b
{
float: left;
Display: block;
Color: #C0C0C0;
font-family: System;
font-size: medium;
Line-height: 30px;
text-indent: 2em;
}
.PopHead span
{
float: right;
Display: block;
Text-align: right;
Line-height: 30px;
Cursor: pointer;
Text-indent: 5px;
Color: #FF0000;
font-size: 12pt;
}
.PopMain
{
Padding: 10px;
Overflow: auto;
}
7: Use of pages
Test server controls can submit forms
$(document).ready(function () {
$("#btnPop").click(function () {
var options = {
title: "my pop",
width: 500,
Heigth: 400,
close: "close",
mainContent: "form"
}
$("#pop1").xsPop(options);
});
});
Okay, that’s it. I originally wanted to make a border pull to change the size, but found that it would take some time, so I stopped doing it. In fact, to be honest, I think dragging doesn't make much sense, and border control size doesn't make much sense either, because I set the overflow and scroll bars will appear.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
