原生js创建模态框

2018-06-24 02:25:00来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1.效果图如下:

1

2.代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
    #pageMask {
        visibility: hidden;    
        position: absolute;
        left: 0px;    
        top: 0px;
        width:100%;
        height:100%;
        text-align: center;
        z-index: 1100;
        background-color: #333; 
        opacity: 0.6;
    }
    #ModalBody{
        background: white;
        width: 50% !important;
        height: 50% !important;
        position:absolute;
        left: 25%;
        top: 25%;
        z-index: 1101;
        border: 1px solid;
        display: none;
    }
    #closeModalBtn{
        position: static;
        margin-top: 5px;
      margin-right: 1%;
      float: right;
        font-size: 14px;
        background: #ccc0;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="content">
        <h1>Test Modal</h1>
        <div id="pageMask"></div>     <!--遮盖层-->
        <button class="showModalBtn" id="showModalBtn">Btn</button>
        <div>    <!--主页面-->
            Page Content...
        </div>
    </div>
    
    <div id="ModalBody">    <!--模态框-->
        <button id="closeModalBtn" style="display: none;">Close</button>
        <div>Test Modal Body...</div>
    </div>
    
    <script>
        window.onload = function(){
            expandIframe();
        }
        function expandIframe(){
            var mask = document.getElementById("pageMask");
            var modal = document.getElementById("ModalBody");
            var closeBtn = document.getElementById("closeModalBtn");
                    var btn = document.getElementById("showModalBtn");
            
            btn.onclick = function(){
                modal.style.display = (modal.style.display == "block")? "none" : "block";
                closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block";
              mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible";
            }
            
            closeBtn.onclick = function(){
                modal.style.display = (modal.style.display == "block")? "none" : "block";
                closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block";
                mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible";
            }
        }
    </script>
</body>
</html>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:web前端开发从0到1—html结构与常用标签

下一篇:关于如何解决bootstrap table 列 切换 刷新 高度不一样