原生js创建模态框

最新推荐文章于 2023-05-12 14:42:08 发布

前端老码农

最新推荐文章于 2023-05-12 14:42:08 发布

阅读量297

点赞数 1

分类专栏：前端文章标签： HTML JS

原文链接：https://www.mk2048.com/blog/blog.php?id=h00ii1aa&title=%E5%8E%9F%E7%94%9Fjs%E5%88%9B%E5%BB%BA%E6%A8%A1%E6%80%81%E6%A1%86

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

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>