Jquery implementation pop-up Layer plugin

Pop-up layer of the application or more, landing, some of the same page operation, others are always others, their own is their own, so has been wanted to write a pop-up layer plug-ins. No more nonsense, just start it!

Do not want to see here can directly download the source code Xspop.zip

1: Mask Layer

To eject the layer, the first to use a mask layer to block the following page, the mask layer is full screen, page scrolling also want to have, so set position:fixed, but also have a transparent effect, the following is my definition of mask layer css, 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: Plug-in main parameters

Tag: Why do I need tag? With tag, you can specify hidden elements that need to pop up, and you can specify that tag is the selector "#*" so that you can eject the specified element. Here I set the default to this.

MainContent: Is this parameter required? I think it is not very useful, I set up mainly for the server control, if all added to the body, it can not submit the form. But the page will refresh after submit click, 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,//eject elements that need to be loaded
Close: "Off",
MainContent: "Body"//container, in order to be able to submit the form, but submit will refresh the page ...

};
var options = $.extend (defaults, options); To overwrite with a pass parameter
This.each (function () {
Xsmain (Options.title, Options.width, Options.heigth, Options.tag, Options.close, options.maincontent); The main entrance to the plugin
});
};



3: Add elements using the Xsmain function and bind events

Here's a deal, which is to control the height and width if the setting exceeds the height of the screen, it adapts to the screen, which prevents the pop-up layer from being too large to operate. The other is the ordinary add HTML, I use the string added


Add a mask layer based on incoming data, pop-up prompt box
function Xsmain (title, width, height, tag, close, maincontent) {
var divmask = "<div class=\" mask\ "></div>";
$ (maincontent). Append (Divmask);
var xsPop1 = "<div id=\" xspop\ "class=\" Popup\ "> <div class=\" pophead\ "id=\" xspophead\ ">";
var xsPop2 = "<b>" + title + "</b><span id=\" xscolse\ ">" + Close + "</span>";
var xsPop3 = "</div> <div class=\" popmain\ "id=\" xspopmain\ ">";
var xsPop5 = "</div><span id=\" xytest\ "></span> </div>";
var allhtml = xsPop1 + xsPop2 + xsPop3 + xsPop5;
$ (maincontent). Append (allhtml);
$ (TAG). Show ();
$ (TAG). Appendto ("#xsPopMain");

Get the height and width of the browser, make a later judgment (height over, drag 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 the action

Here to first put the tag to the container, or the back remove will be together remove, the second pop-up can not find the tag.


Close the pop-up layer
function Closepop (tag, maincontent) {
$ (maincontent). append (tag); Save, or the fourth step of $ ("#xsPop"). Remove () will clear the tag off
$ (TAG). Hide ();
$ (". Mask"). Remove ();
$ ("#xsPop"). Remove ();
}



5: Drag Effect

Method One: The first time to find the use of elements of the event, but it is very easy to lose the element of the problem, the effect is not ideal


Drag-and-drop of the pop-up layer (failed method, the object will be lost)
Control for the drag element, tag for the action element, general control in 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 Two, I currently use the method, using the document down and up, but there are some problems, moving too fast problem, coordinates a small bounce phenomenon

I also found a problem, if I left the pop-up layer directly to the top of the screen inside, then let go, hehe, you can never drag it back or point off. I went to see the Baidu homepage of the pop-up layer, they also have such a phenomenon, but the window to zoom out after the pop-up layer will return to the center. I also try to do this, but I am bound onresize will not be able to move to the bottom, they use the event is definitely not onresize. So I'm going to judge the mouse position not to be less than 0.




The drag of the pop-up layer
Control for the drag element, tag for the action element, general control in the tag
function Xsdrag (control, tag) {
$ (Control). MouseDown (function (e)//e mouse event
{
var offset = $ (this). offset (); Div in the page position
var x = E.pagex-offset.left; Get the mouse pointer away from the left edge of the DIV element
var y = e.pagey-offset.top; Get the distance of the mouse pointer from the top edge of the DIV element
$ (document). Bind ("MouseMove", function (EV)//Bound mouse movement event, because the cursor is also effective outside the DIV element, so use the Doucment event without the DIV element's event
{
if (ev.pagey <= 0) {return;} Prevent the border from closing and dragging after it has exceeded the screen
$ (tag). CSS ({
' Left ': Ev.pagex-x + $ (tag). Width ()/2,//My layout needs to add this
' 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 I have more than half 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 the page

The test server control can submit the form


$ (document). Ready (function () {
$ ("#btnPop"). Click (function () {
var options = {
Title: "My Pop",
WIDTH:500,
heigth:400,
Close: ' Close ',
MainContent: "Form"
}
$ ("#pop1"). Xspop (options);

});
});

8: Source Download

Download Address: Xspop.zip