js 實例2 實現模態框彈出；

本文轉載自查看原文 2018-05-30 16:53 1660 js案例

簡單實現功能如上： 1，單擊按鈕，模態框彈出。

　　　　　　　　　2、單擊紅色的叉號關閉復選框。

思路：先將沒有隱藏的屬性寫好，然后通過js實現新建各種標簽以及屬性。

具體代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        #box{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.3);
        }
        #content{
            position: relative;
            top: 150px;
            width: 400px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: red;
            background-color: #fff;
            margin: auto;
        }
        #span1{
            position: absolute;
            background-color: red;
            top: 0;
            right: 0;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            cursor: pointer;

        }
    </style>
</head>
<body>
<button id="btn">彈出</button>
</body>
<script type="text/javascript">
    //獲取dom元素 1.獲取事件源
    var oBtn = document.getElementById('btn');
    //創建彈出模態框的相關DOM對象
    var oDiv = document.createElement('div');
    var oP = document.createElement('p');
    var oSpan = document.createElement('span');


    // 設置屬性
    oDiv.id = 'box';
    oP.id = 'content'
    oP.innerHTML = '模態框成功彈出'
    oSpan.innerHTML = 'X';
    oSpan.id = 'span1'

    // 追加元素
    oDiv.appendChild(oP);
    oP.appendChild(oSpan);

    // 點擊彈出按鈕 彈出模態框
    oBtn.onclick = function(){
        //動態的添加到body中一個div
        this.parentNode.insertBefore(oDiv,btn)

    }
    // 點擊X 關閉模態框
    oSpan.onclick = function(){
        // 移除oDiv元素
        oDiv.parentNode.removeChild(oDiv)
    }

</script>
</html>

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Js實例——模態框彈出層 JavaScript：用JS實現加載頁面前彈出模態框 vue中實現模態框彈出框動畫（旋轉彈出）原生js模態框實現 Bootstrap模態彈出框 Bootstrap使用模態框modal實現表單提交彈出框 Bootstrap使用模態框modal實現表單提交彈出框 fastadmin模態框（彈出框） BootStrap學習筆記JS插件（一）--模態彈出框小程序實現彈出遮罩層模態框