Jquery Implementation of the pop-up layer plug-in _ jquery-js tutorial

This article mainly introduces Jquery plug-ins for implementing the pop-up layer, including the mask layer, plug-in parameters, closed actions, and drag-and-drop effects. If you need more plug-ins, refer to the pop-up layer applications, login, some operations on the same page, others are always others, and their own are their own, so I have always wanted to write a pop-up layer plug-in. Not much nonsense. Let's get started!

1: Mask Layer

To bring up the layer, first use a mask layer to block the following page. This mask layer is full screen and must be available for Page scrolling. Therefore, set position: fixed; to have a transparent effect, the following is my definition of the mask layer css, named mask.

The Code is as follows:

. 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 tag? You can use tags to specify the hidden elements to be popped up. You can specify the tag as the selector "# *" to display the specified elements. Here I set the default value to this.

MainContent: Is this parameter required? I think it is of little use. I set it mainly for the server control. If all the controls are added to the body, the form cannot be submitted. However, after the submit button is clicked, the page will be refreshed and the pop-up layer will disappear, so I think it is useless...

The Code is as follows:

$. Fn. xsPop = function (options ){
Var defaults = {// Default Value
Title: "pop-up window", // window title
Width: 500,
Heigth: 400,
Tag: this, // The elements to be loaded are displayed.
Close: "close ",
MainContent: "body" // container, in order to submit the form, but the submit will refresh the page...
};
Var options = $. extend (defaults, options); // overwrite with Parameters
This. each (function (){
XsMain (options. title, options. width, options. heigth, options. tag, options. close, options. mainContent); // The main entry of the plug-in.
});
};

3: Use the xsMain function to add elements and bind events

There is a processing here, that is, if the height and width of the control exceed the screen height width, It will adapt to the screen, so as to prevent the pop-up layer from being too large to operate. The others are the ordinary html, and the strings used by myself are added together.

The Code is as follows:

// Adds a Mask Layer Based on incoming data. A prompt box is displayed.
Function xsMain (title, width, height, tag, close, mainContent ){
Var pmask ="

";
$ (MainContent). append (pmask );
Var xsPop1 ="

";
Var xsPop2 =""+ Title +""+ Close + "";
Var xsPop3 ="

";
Var xsPop5 ="

";
Var allHtml = xsPop1 + xsPop2 + xsPop3 + xsPop5;
$ (MainContent). append (allHtml );
$ (Tag). show ();
$ (Tag). appendTo ("# xsPopMain ");
// Obtain the height and width of the browser, and judge the back (the height exceeds the limit of the drag border)
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 the drag action
$ ("# XsColse"). bind ("click", function () {ClosePop (tag, mainContent) ;}); // bind the close action
}

4: close action

Here, we need to give the tag to the container first. Otherwise, the tag will be removed when it is removed later. The tag cannot be found in the second pop-up.

The Code is as follows:

// Close the pop-up layer
Function ClosePop (tag, mainContent ){
$ (MainContent). append (tag); // save it. Otherwise, $ ("# xsPop"). remove () in Step 4 clears the tag.
$ (Tag). hide ();
$ (". Mask"). remove ();
$ ("# XsPop"). remove ();
}

5: drag effect

Method 1: The first time we found an event that uses elements, it is easy to cause element loss and the effect is not satisfactory.

The Code is as follows:

// Drag the pop-up layer (if the method fails, the object will be lost)
// Control is the drag-and-drop element, and tag is the action element. Generally, 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 ){
// Outputs (tag).css ({
// 'Left': event. pageX-abs_x + $ (tag). width ()/2-1,
// 'Top': event. pageY-abs_y + $ (tag). height ()/2-1
//});
//}
// Return false;
//});
//}

Method 2: I am using the down and up methods of document, but there are still some problems, the moving is too fast, the coordinates have a small beating Phenomenon

I also found a problem. If I drag the pop-up layer directly to the top of the screen, I will let it go. You can never drag it back or close it. I checked the pop-up layer of the Baidu homepage. They also had this phenomenon. However, after the window is zoomed in and out, the pop-up layer will return to the center. I also tried to do this, but I bound the onresize and it would not be able to move to the bottom. The event they used was definitely not onresize. So I decided that the mouse position should not be less than 0.

The Code is as follows:

// Drag the pop-up layer
// Control is the drag-and-drop element, and tag is the action element. Generally, control is within the tag.
Function xsdrag (control, tag ){
$ (Control). mousedown (function (e) // e mouse event
{
Var offset = $ (this). offset (); // The Position of the DIV on the page
Var x = e. pageX-offset. left; // obtain the distance from the cursor to the left boundary of the DIV element.
Var y = e. pageY-offset. top; // obtain the distance from the cursor to the upper boundary of the DIV element.
$ (Document ). bind ("mousemove", function (ev) // bind the move event of the mouse. Because the cursor must have an effect outside the DIV element, use the doucment event, instead of DIV element events
{
If (ev. pageY <= 0) {return;} // prevent the border from being closed or dragged when it exceeds the screen
Detail (tag).css ({
'Left': ev. pageX-x + $ (tag). width ()/2, // you need to add this for your 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 the top and left + margin-top negative values, so my js contains more height and half of width.

The Code is as follows:

. 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;
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: Page usage

The test server control can submit a form.

The Code is as follows:

$ (Document). ready (function (){
$ ("# BtnPop"). click (function (){
Var options = {
Title: "my pop ",
Width: 500,
Heigth: 400,
Close: "close ",
MainContent: "form"
}
$ ("# Pop1"). xsPop (options );
});
});

That's all. I also wanted to make a border to pull and change the size. I found it would take some time to stop doing it. In fact, to tell the truth, I think dragging is of little significance, and border size control is of little significance, because a scroll bar will appear when I set overflow.