jQuery implementation of simple pop-up window example

This article mainly introduces the simple implementation code of jQuery pop-up window in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

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

First write the code of the reference file:

// 每个弹窗的标识
var x =0;

var idzt = new Array();

var Window = function(config){
 
 //ID不重复
 idzt[x] = "zhuti"+x; //弹窗ID
 
 //初始化，接收参数
 this.config = {
  width : config.width || 300, //宽度
  height : config.height || 200, //高度
  buttons : config.buttons || '', //默认无按钮
  title : config.title || '标题', //标题
  content : config.content || '内容', //内容
  isMask : config.isMask == false?false:config.isMask || true, //是否遮罩
  isDrag : config.isDrag == false?false:config.isDrag || true, //是否移动
  };
 
 //加载弹出窗口
 var w = ($(window).width()-this.config.width)/2;
 var h = ($(window).height()-this.config.height)/2;
 
 var nr = "<p class=&#39;zhuti&#39; id=&#39;"+idzt[x]+"&#39; bs=&#39;"+x+"&#39; style=&#39;width:"+this.config.width+"px; height:"+this.config.height+"px; background-color:white; left:"+w+"px; top:"+h+"px;&#39;></p>";
 $("body").append(nr);
 
 //加载弹窗标题
 var content ="<p id=&#39;title"+x+"&#39; class=&#39;title&#39; bs=&#39;"+x+"&#39;>"+this.config.title+"<p id=&#39;close"+x+"&#39; class=&#39;close&#39; bs=&#39;"+x+"&#39;>×</p></p>";
 //加载弹窗内容
 var nrh = this.config.height - 75;
 content = content+"<p id=&#39;content"+x+"&#39; bs=&#39;"+x+"&#39; class=&#39;content&#39; style=&#39;width:100%; height:"+nrh+"px;&#39;>"+this.config.content+"</p>";
 //加载按钮
 content = content+"<p id=&#39;btnx"+x+"&#39; bs=&#39;"+x+"&#39; class=&#39;btnx&#39;>"+this.config.buttons+"</p>";
 
 //将标题、内容及按钮添加进窗口
 $(&#39;#&#39;+idzt[x]).html(content);
 
 
 //创建遮罩层
 if(this.config.isMask)
 {
  var zz = "<p id=&#39;zz&#39;></p>";
  $("body").append(zz);
  $("#zz").css(&#39;display&#39;,&#39;block&#39;);
 }
 
 //最大最小限制，以免移动到页面外
 var maxX = $(window).width()-this.config.width;
 var maxY = $(window).height()-this.config.height;
 var minX = 0,
  minY = 0;
 
 //窗口移动
 if(this.config.isDrag)
 {
  //鼠标移动弹出窗
  $(".title").bind("mousedown",function(e){
    
    var n = $(this).attr("bs"); //取标识
    
    //使选中的到最上层
    $(".zhuti").css("z-index",3);
    $(&#39;#&#39;+idzt[n]).css("z-index",4);
    
    //取初始坐标
    var endX = 0, //移动后X坐标
     endY = 0, //移动后Y坐标
     startX = parseInt($(&#39;#&#39;+idzt[n]).css("left")), //弹出层的初始X坐标
     startY = parseInt($(&#39;#&#39;+idzt[n]).css("top")), //弹出层的初始Y坐标
     downX = e.clientX, //鼠标按下时，鼠标的X坐标
     downY = e.clientY; //鼠标按下时，鼠标的Y坐标
     
    //绑定鼠标移动事件
    $("body").bind("mousemove",function(es){
     
     endX = es.clientX - downX + startX; //X坐标移动
     endY = es.clientY - downY + startY; //Y坐标移动
     
     //最大最小限制
     if(endX > maxX)
     {
      endX = maxX;
     } else if(endX < 0)
     {
      endX = 0;
     }
     if(endY > maxY)
     {
      endY = maxY;
     } else if(endY < 0)
     {
      endY = 0;
     }
     
     $(&#39;#&#39;+idzt[n]).css("top",endY+"px");
     $(&#39;#&#39;+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"); //找标识
   $(&#39;#&#39;+idzt[m]).remove(); //移除弹窗
   $(&#39;#zz&#39;).remove(); //移除遮罩 
  
  })
  
  x++; //标识增加
  
}

This JS file puts the pop-up window The content, style, position, button, and mask layer have all been processed. Take a good look at the code inside before quoting. It is best to understand it. Detailed comments are also made in it. I hope it can help you.

The following is the 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 has written each tag and the required style, which can save the amount of code on the main page and make the main page It looks very neat. If you want to change it, you only need to modify it in the CSS style sheet. Note: No matter what file you want to reference, the Jquery file must be placed at the front! ! !

The following is the main page code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.11.2.min.js">
</script>
<script type="text/javascript" src="tanchuang.js">
</script>
<link href="tanchuang.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<style type="text/css">
*{
 margin: 0px auto;
}
</style>
</head>

<body style="background-color:#999">
<p style="width:200px; margin-top:10px">
<input type="button" value="弹出窗口" id="btntc" style="width:100px; height:30px; font-size:18px;" />
</p>


</body>
<script type="text/javascript">
$(document).ready(function(e) {
 
 $(&#39;#btntc&#39;).click(function(){
  
   var html = "<p style=&#39;color:red&#39;>这是测试的弹窗</p>";
   var button ="<input type=&#39;button&#39; value=&#39;确定&#39; /><input type=&#39;button&#39; value=&#39;取消&#39; />";

   var win = new Window({
    
    width : 400, //宽度
    height : 300, //高度
    title : &#39;测试弹窗&#39;, //标题
    content : html, //内容
    isMask : false, //是否遮罩
    buttons : button, //按钮
    isDrag:true, //是否移动
    
    });
  
  })
});
</script>
</html>

Similarly, detailed comments are also added to the main page to facilitate future understanding. I hope it can help myself and everyone. Let’s take a look at the effect:

The effect after clicking on the pop-up window:

##We can see that each pop-up window can be moved, and countless windows can pop up. If the mask layer is changed to true, the second pop-up window will not appear.

Be sure to remember the practicality of the mask layer, which can avoid many bugs. If you want to reference the pop-up window, you must test it before using it to prevent problems. Remember!

Related recommendations:

Detailed explanation on how to add pop-up window information to Dreamweaver webpage

javascript, html5, css3 custom pop-up window

Comprehensive use and techniques of JS pop-up windows

The above is the detailed content of jQuery implementation of simple pop-up window example. For more information, please follow other related articles on the PHP Chinese website!