弹出层效果和弹出框拖动效果
目前能够简单实现弹出层的框架实在是多，但个人还是觉得原生js代码实现比较具有根本性。
今天刚写完弹出层效果，以及对弹出框的拖动效果，链接：demo、源码。
js代码总体分为三个部分：获取节点并添加点击事件；创建弹出层节点并设置样式；添加鼠标移动事件。重点是后面两个部分。
HTML/CSS
首先还是附上HTML和CSS代码，样式写的有些复杂，纯属个人强迫症犯了。。。需要注意的就是position和z-index两个样式。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>弹出层效果</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 button{ 9 width: 130px; 10 height: 35px; 11 margin-top: 200px; 12 margin-left: auto; 13 margin-right: auto; 14 display: block; 15 font-size: 15px; 16 border-style: none; 17 border-radius: 5px; 18 cursor: pointer; 19 background: #e1e1e1; 20 } 21 #pop_up{ 22 background: #333; 23 position: absolute; 24 opacity:0.5; 25 filter: alpha(opacity=50); 26 top:0; 27 left: 0; 28 z-index: 1000; 29 } 30 #box{ 31 position: fixed; 32 z-index: 1002; 33 } 34 .content{ 35 width:400px; 36 height:200px; 37 margin: 0 auto; 38 background:#ffffff; 39 position: relative; 40 cursor: move; 41 -moz-border-radius: 5px; 42 -webkit-border-radius: 5px; 43 border-radius: 5px; 44 } 45 #close{ 46 width: 30px; 47 height: 30px; 48 background: url("close.png") no-repeat; 49 position: absolute; 50 cursor: pointer; 51 right: 10px; 52 top: 10px; 53 } 54 </style> 55 </head> 56 <body> 57 <button id="clk">点击查看弹窗</button> 58 </body> 59 </html
弹出层效果
1 //获取页面可视区高宽 2 var oWidth = document.documentElement.clientWidth; 3 var oHeight = document.documentElement.clientHeight; 4 5 //创建阴影背景节点 6 var oParent = document.createElement('div'); 7 oParent.id = 'pop_up'; 8 oParent.style.width = oWidth +'px'; 9 oParent.style.height = oHeight +'px'; 10 document.body.appendChild(oParent); 11 12 //创建弹出层节点 13 var oChild = document.createElement('div'); 14 oChild.id = "box"; 15 oChild.innerHTML = "<div class='content'><div id='close'></div></div>"; 16 document.body.appendChild(oChild); 17 18 //设置居中显示 19 var cWidth = oChild.offsetWidth; 20 var cHeight = oChild.offsetHeight; 21 oChild.style.left=oWidth/2-cWidth/2+"px"; 22 oChild.style.top=oHeight/2-cHeight/2+"px"; 23 24 //关闭弹出层 25 var close = document.getElementById('close'); 26 close.onclick = function(){ 27 document.body.removeChild(oParent); 28 document.body.removeChild(oChild); 29 };
如果底层页面高度超过可视区高度，应该获取网页正文全文高——document.body.scrollHeight，这里不再展开。
这里弹出层的思想就是进入时创建节点，包括阴影背景以及弹出框两部分，关闭时再移除创建的节点。
弹出框拖拽效果
1 //移动弹出框 2 var move = false; 3 var _x, _y; //记录鼠标相对弹出框的left、top 4 var x, y; //记录弹出框相对页面的left、top，以便判断 5 oChild.onmousedown = function(e){ 6 move = true; 7 _x = e.pageX - parseInt(oChild.style.left); 8 _y = e.pageY - parseInt(oChild.style.top); 9 }; 10 oChild.onmousemove = function(e){ 11 if(move){ 12 x = e.pageX - _x; 13 y = e.pageY - _y; 14 if(x < 0) x = 0; 15 if(y < 0) y = 0; 16 if(x > oWidth- cWidth) x = oWidth- cWidth; 17 if(y > oHeight - cHeight) y = oHeight - cHeight; 18 oChild.style.left = x + 'px'; 19 oChild.style.top = y + 'px'; 20 } 21 }; 22 oChild.onmouseup = function() { 23 move = false; 24 }; 25 oChild.onmouseout = function() { 26 move = false; 27 };
需要注意的是这里设置了允许移动标志move；还有弹出框的定位与鼠标坐标的计算关系；另外将弹出框限制在页面区域内。
