js实现弹框效果

本文实例为大家分享了js实现弹框效果的具体代码，供大家参考，具体内容如下

利用display来控制弹窗的现实和隐藏

!-- 弹出层 -->
    div id="poplayer">
    /div>
     !--黑色蒙版 -->
    div id="popBox">
      div class="close">
       X  /div>
      div>
       !-- 内容 -->
     /div>
    /div>
    

js：

//点击关闭按钮VAR close = document.querySelector(".close")close.onclick = function () {
     console.LOG("点击") var popBox = document.getElementById("popBox");
     var popLayer = document.getElementById("popLayer");
     popBox.style.display = "none";
     popLayer.style.display = "none";
}
    //需要显示时调用var popLayer = document.getElementById("popLayer");
    popBox.style.display = "block";
    popLayer.style.display = "block";
    

CSS:

/* 弹出层 */#popLayer {
     display: none;
     background-color: #000;
     posITion: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10;
     opacity: 0.6;
}
/*弹出层*/#popBox {
     display: none;
     background-color: #FFFFFF;
     z-index: 11;
     width: 220px;
     height: 300px;
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     margin: auto;
}
/*关闭按钮*/#popBox .close {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     position: absolute;
     border: 1px solid #fff;
     color: #fff;
     text-align: center;
     line-height: 20px;
     right: 8px;
     top: 8px;
     z-index: 50;
}
#popBox .close a {
     text-decoration: none;
     color: #2D2C3B;
}
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• vue.js中toast用法及使用toast弹框的实例代码
• vue.js实现只弹一次弹框
• js+html5实现半透明遮罩层弹框效果
• js自定义弹框插件的封装
• 基于layer.js实现收货地址弹框选择然后返回相应的地址信息
• js实现上下左右弹框划出效果
• struts json 类型异常返回到js弹框问题解决办法
• javascript实现无法关闭的弹框
• 轻松实现js弹框显示选项
• Bootstrap和Angularjs配合自制弹框的实例代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！