Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use jQuery to achieve pop-up window". In daily operation, I believe that many people have doubts about how to use jQuery to achieve pop-up window. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt of "how to use jQuery to achieve pop-up window". Next, please follow the editor to study!

First write the code that references the file:

/ / the logo of each pop-up window var x = 0 Bing var idzt = new Array (); var Window = function (config) {/ / ID do not repeat idzt [x] = "zhuti" + x / / pop-up window ID / / initialize Receive parameter this.config = {width: config.width | | 300, / / width height: config.height | | 200, / / height buttons: config.buttons | |', / / default no button title: config.title | | 'title', / / title content: config.content | | 'content', / / content isMask: config.isMask = = false?false:config.isMask | | true, / / whether to mask isDrag: config.isDrag = = false?false:config.isDrag | | true | / / whether to move} / / load pop-up window var w = ($(window). Width ()-this.config.width) / 2; var h = ($(window). Height ()-this.config.height) / 2; var nr = ""; $("body") .append (nr); / / load pop-up window title var content = "" + this.config.title+ "×"; / / load pop-up window content var nrh = this.config.height-75; content = content+ "+ this.config.content+" / / load button content = content+ "" + this.config.buttons+ "; / / add title, content, and buttons to window $('#'+ idzt [x]) .html (content); / / create mask layer if (this.config.isMask) {var zz ="; $("body") .append (zz); $("# zz"). Css ('display','block') } / / maximum and minimum limit to avoid moving off the page var maxX = $(window). Width ()-this.config.width; var maxY = $(window). Height ()-this.config.height; var minX = 0, minY = 0; / / window movement if (this.config.isDrag) {/ / mouse movement pop-up window $(".title") .bind ("mousedown", function (e) {var n = $(this) .attr ("bs") / / take the logo / / make the selected one go to the top $(".zhuti") .css ("z-index", 3); $('#'+ idzt [n]) .css ("z-index", 4) / / take the initial coordinate var endX = 0, / / move the X coordinate endY = 0, / / move the Y coordinate startX = parseInt ($('#'+ idzt [n]) .css ("left")), / / the initial X coordinate of the ejection layer startY = parseInt ($('#'+ idzt [n]) .css ("top")), / / the initial Y coordinate of the pop-up layer downX = e.clientX / / when the mouse is pressed The X coordinate of the mouse downY = e.clientY / / when the mouse is pressed, the Y coordinates of the mouse / / bind the mouse movement event $("body"). Bind ("mousemove", function (es) {endX = es.clientX-downX + startX; / / X coordinate movement endY = es.clientY-downY + startY; / / Y coordinate movement / / maximum and minimum limit if (endX > maxX) {endX = maxX } else if (endX

< 0) { endX = 0; } if(endY >

MaxY) {endY = maxY;} else if (endY

< 0) { endY = 0; } $('#'+idzt[n]).css("top",endY+"px"); $('#'+idzt[n]).css("left",endX+"px"); window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty(); //取消选中文本 }); }); //鼠标按键抬起，释放移动事件 $("body").bind("mouseup",function(){ $("body").unbind("mousemove"); }); } //关闭窗口 $(".close").click(function(){ var m = this.getAttribute("bs"); //找标识 $('#'+idzt[m]).remove(); //移除弹窗 $('#zz').remove(); //移除遮罩 }) x++; //标识增加 } 这个JS文件把弹出窗口的内容，样式，位置，按钮，以及遮罩层都做了处理，在引用前好好看看里面的代码，最好都能弄懂，里面也做了详细的注释，希望可以帮的你。 下面是CSS样式表： .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;} 这个样式表把每个标签和所需要的样式都写好了，这样就能节省主要页面的代码量，并且让主页面看起来非常的整齐，如果要改，只需要在CSS样式表中修改即可，注意：不管要引用什么文件，必须把Jquery文件放在最前面！！！ 下面是主页面代码： 无标题文档*{ margin: 0px auto;}$(document).ready(function(e) { $('#btntc').click(function(){ var html = "这是测试的弹窗"; var button =""; var win = new Window({ width : 400, //宽度 height : 300, //高度 title : '测试弹窗', //标题 content : html, //内容 isMask : false, //是否遮罩 buttons : button, //按钮 isDrag:true, //是否移动 }); })}); 同样的，主页面里面也加了详细的注释，这样便于日后的理解，希望可以帮的自己和大家。让我们看看效果吧：

The effect after clicking the pop-up window:

We can see that each pop-up window can be moved, and countless pop-up windows can be popped up. If you change the mask layer to true, there will be no second pop-up window.

Be sure to remember the usefulness of the mask layer, so that you can avoid a lot of BUG if you want to reference pop-up windows must be tested before use, in case of problems, remember!

At this point, the study on "how to use jQuery to achieve pop-up window" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.