原生js創建模態框_ZenDei技術網路在線

原生js創建模態框

-Advertisement-

1.效果圖如下： 2.代碼如下： ...

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>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

漸進式Web應用（PWA）入門教程（下）

上篇文章我們對漸進式Web應用（PWA）做了一些基本的介紹。漸進式Web應用（PWA）入門教程（上）在這一節中，我們將介紹PWA的原理是什麼，它是如何開始工作的。第一步：使用HTTPS 漸進式Web應用程式需要使用HTTPS連接。雖然使用HTTPS會讓您伺服器的開銷變多，但使用HTTPS可以讓 ...
選擇排序和插入排序--學習筆記

插入排序和選擇排序--學習筆記從《演算法導論》學習了插入排序，選擇排序是在課後練習出現的，代碼用javascript編寫。首先，瞭解一下插入排序和選擇排序。類似玩撲克游戲，如下圖（摘自《演算法導論》-- 插入排序的附圖）：插入排序和選擇排序就像兩個不同習慣的人：一個人喜歡一張一張地摸牌（插入排序） ...
react-redux源碼解析

一、 react-redux 和 redux是兩個東西。在做react項目的時候，一般用react-redux和redux搭配起來開發。redux主要是做數據、狀態的管理，而react-redux主要是方便數據redux在react使用。二、源碼解析 1)、入口文件index.js 2)、Pro ...
關於換行這個動作，win 和 mac 的實現

‘\r'是回車，前者使游標到行首，（carriage return）'\n'是換行，後者使游標下移一格，（line feed）\r 是回車，return\n 是換行，newline對於換行這個動作：unix下一般只有一個0x0A表示換行("\n")，windows下一般都是0x0D和0x0A兩個字元 ...
關於埠衝突的解決方式Error: listen EACCES 0.0.0.80

筆者昨天下午臨走前安裝了vs 2017想要運行一下項目的NET後端來讓本機的前端直接對接後端，但是沒註意到運行vs後IIS直接占用了本機的80埠。第二天跑nodeJS的時候直接Error: listen EACCES 0.0.0.80報錯筆者總結了一下遇到埠報錯的問題到解決問題的始末，遇到埠 ...
npm --save-dev --save 的區別

我們在使用npm install 安裝模塊或插件的時候，有兩種命令把他們寫入到 package.json 文件裡面去，比如： --save-dev（-D） --save（-S）在 package.json 文件裡面提現出來的區別就是，使用 --save-dev 安裝的插件，被寫入到 devDep ...
3、NPM使用

內容：NPM介紹，安裝web框架模塊，一些基本命令#####介紹NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種： • 允許用戶從NPM伺服器下載別人編寫的第三方包到本地使用。 • 允許用戶從NPM伺服器下載並安裝別人編寫的命令行程式到本 ...
web前端開發從0到1—html結構與常用標簽

一：html文檔標簽結構 <html></html> <head></head> <title></title> <!--title標題標簽 ...