弹出层效果和弹出框拖动效果

川长思鸟来 2023-08-17 17:45 161阅读 0赞

目前能够简单实现弹出层的框架实在是多，但个人还是觉得原生js代码实现比较具有根本性。

今天刚写完弹出层效果，以及对弹出框的拖动效果，链接：[demo][]、[源码][Link 1]。

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；还有弹出框的定位与鼠标坐标的计算关系；另外将弹出框限制在页面区域内。

转载于:https://www.cnblogs.com/Livia-Peng/p/pop-up.html

[demo]: http://123.207.0.184/pop-up/pop-up.html
[Link 1]: https://github.com/Livia-Peng/test_demo/tree/master/pop-up