Simple implementation code of the jQuery pop-up window, and the code of the jquery pop-up window

Simple implementation code of the jQuery pop-up window, and the code of the jquery pop-up window

Today I spoke about the composition and usage of the Jquery pop-up window:

Write the code of the referenced file first:

// Var x = 0; var idzt = new Array (); var Window = function (config) {// ID does not repeat idzt [x] = "zhti" + x; // pop-up window ID // initialization, receiving the parameter this. config = {width: config. width | 300, // width height: config. height | 200, // The height of buttons: config. buttons | '', // No button title by default: config. title | 'title', // title content: config. content | 'content', // content isMask: config. isMask = false? False: config. isMask | true, // Do You Want To mask isDrag: config. isDrag = false? False: config. isDrag | true, // whether to move}; // load the pop-up window var w = ($ (window ). width ()-this. config. width)/2; var h = ($ (window ). height ()-this. config. height)/2; var nr = "<div class = 'zhiti' id = '" + idzt [x] + "'bs ='" + x + "'style = 'width: "+ this. config. width + "px; height:" + this. config. height + "px; background-color: white; left:" + w + "px; top:" + h + "px; '> </div> "; $ ("body "). append (nr); // load the pop-up window title var content = "<div id = 'title" + x +" 'Class = 'title' bs = '"+ x +"'> "+ this. config. title + "<div id = 'close" + x + "'class = 'close' bs = '" + x + "'> × </div>"; // load the pop-up window content var nrh = this. config. height-75; content = content + "<div id = 'content" + x + "'bs = '" + x + "'class = 'content' style = 'width: 100%; height: "+ nrh +" px; '> "+ this. config. content + "</div> "; // load the button content = content + "<div id = 'btnx" + x + "'bs = '" + x + "'class = 'btnx'>" + this. config. buttons + "</div>"; // set the title, Content and buttons are added to the window ('{'{idzt}x}}.html (content); // create the mask layer if (this. config. isMask) {var zz = "<div id = 'zz '> </div>"; $ ("body "). append (zz); $ ("# zz" ).css ('display', 'block');} // maximum and minimum limits, to avoid moving to the outside of the page var maxX = $ (window ). width ()-this. config. width; var maxY = $ (window ). height ()-this. config. height; var minX = 0, minY = 0; // move the window if (this. config. isDrag) {// move the mouse to bring up the window $ (". title "). bind ("mousedown", function (e) {var n = $ (th Is ). attr ("bs"); // retrieve the ID // make the selected to the top $ (". zhui.css ("z-index", 3); condition ('{'{idzt}n}}.css ("z-index", 4); // obtain the initial coordinate var endX = 0, // After the X coordinate is moved, endY = 0, // After the Y coordinate is moved, startX = parseint('{'{idzt}n}}.css ("left ")), // The initial X coordinate startY = parseint(('{'{idzt}n}}.css ("top") of the pop-up layer, // The initial Y coordinate downX = e of the pop-up layer. clientX, // when the mouse is pressed, the X coordinate of the mouse downY = e. clientY; // Y coordinate of the mouse when the mouse is pressed // bind the mouse movement event $ ("body "). bind ("mousemove", function (es) {endX = es. clientX -DownX + startX; // The X coordinate moves endY = es. clientY-downY + startY; // Y coordinate movement // maximum and minimum limits if (endX> maxX) {endX = maxX;} else if (endX <0) {endX = 0;} if (endY> maxY) {endY = maxY;} else if (endY <0) {endY = 0;} else ('{'{idzt}n{}.css ("top ", endY + "px"); ('{'{idzt}n}}.css ("left", endX + "px"); window. getSelection? Window. getSelection (). removeAllRanges (): document. selection. empty (); // deselect selected text}); // move the mouse up to release the moving event $ ("body "). bind ("mouseup", function () {$ ("body "). unbind ("mousemove") ;}// close the window $ (". close "). click (function () {var m = this. getAttribute ("bs"); // identify $ ('#' + idzt [m]). remove (); // remove the pop-up window $ ('# zz '). remove (); // remove the mask}) x ++; // Add an identifier}

This JS file processes the content, style, position, button, and mask layer of the pop-up window. You 'd better understand the code before referencing it, it also provides a detailed comment, hoping to help you.

The following is a CSS style sheet:

.zhuti{  position:absolute;  z-index:3;  font-size:14px;  border-radius:5px;  box-shadow:0 0 5px white;  overflow:hidden;  color:#333;}.title{  background-color:#3498db;  vertical-align:middle;  height:35px;  width:100%;  line-height:35px;  text-indent:1em;}.close{  float:right;  width:35px;  height:35px;  font-weight:bold;  line-height:35px;  vertical-align:middle;  color:white;  font-size:18px;  }.close:hover{  cursor:pointer;}.content{  text-indent:1em;  padding-top:10px;}.btnx{  height:30px;  width:100%;  text-indent:1em;}.btn{  height:28px;  width:80px;  float:left;  margin-left:20px;  color:#333;}#zz{  width:100%;  height:100%;  opacity:0.15;  display:none;  background-color:#ccc;  z-index:2;  position:absolute;  top:0px;  left:0px;}

This style sheet writes all the labels and the required styles, which saves the amount of code on the main page and makes the homepage look very neat. If you want to change it, you only need to modify the CSS style sheet. Note: No matter what file you want to reference, you must put the Jquery file at the beginning !!!

The following is the homepage code:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Similarly, a detailed comment is added to the home page to facilitate future understanding and hope you can help yourself and everyone. Let's take a look at the effect:

Click the effect in the pop-up window:


We can see that each pop-up window can be moved, and countless windows can be displayed. If you change the mask layer to true, the second pop-up window will no longer appear.
Remember the practical usage of the mask layer, so that you can avoid many bugs. If you want to reference the pop-up window, you must test it before using it to prevent problems. Remember!
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.