Home > Web Front-end > JS Tutorial > Code analysis to achieve pop-up effect using JavaScript

Code analysis to achieve pop-up effect using JavaScript

黄舟
Release: 2017-03-21 14:34:00
Original
1604 people have browsed it

This article mainly introduces the code analysis of JavaScript to achieve the pop-up effect, which has a good reference value. Let’s take a look at it with the editor below

Rendering:

Without further ado, please look at the code :

每个弹窗的标识
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; 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++; 标识增加
}
Copy after login

The above is the detailed content of Code analysis to achieve pop-up effect using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template