JavaScript 实现简单的 弹出框关闭框

JavaScript 实现简单的 弹出框关闭框

知识点:

　　1.javaScript 添加HTML标签

　　2.javaScript 添加HTML标签属性

　　3.javaScript 追加元素

代码献上:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height:100%;
        }
        #box{
            width: 100%;
            height: 100%;
        }
        #content{
            position: relative;
            top: 150px;
            width: 200px;
            /*line-height: 200px;*/
            height: 200px;
            text-align: center;
            color: red;
            background: green;
            margin: auto;
        }
        #span1{
            position: fixed;
            background-color: red;
            top:0;
            right:0;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #ffffff;
        }
    </style>
</head>
<body >
    <button id="btn">弹出</button>

</body>
    <script type="text/javascript">
        // 获取dom元素 1.获取事件源
        var oBtn = document.getElementById('btn');
        // 创建弹出模态框的相关DOM对象
        var oDive = document.createElement('div');
        var oP = document.createElement("p")
        var oSpan = document.createElement('span')

        // 设置属性
        oDive.id = 'box';
        oP.id = 'content';
        oSpan.innerHTML = 'X';
        oP.innerHTML = '恭喜IG获得S8冠军!';

        oSpan.id = 'span1;';

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

        // 点击弹出按钮 弹出模态框
        oBtn.onclick = function(){
            // 动态的添加到body中一个div
            this.parentNode.insertBefore(oDive,oBtn)
        }
        // 点击x, 关闭模态框
        oSpan.onclick = function () {
            // 移除oDiv元素
            oDive.parentNode.removeChild(oDive)
        }
    </script>
</html>

 

posted @ 2018-11-09 20:38  孔辉  阅读(1414)  评论(0)  编辑  收藏  举报