模态框案例

编辑本博客

 操作DOM元素，document object model

规定浏览器中所有的标签为树状结构

模态框案例：

<!DOCTYPE html>
<html lang="en">
<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-color: rgba(0,0,0,0.1);
        }
        #content{
            position: relative;
            top: 150px;
            width: 400px;
            height: 200px;
            text-align:center;
            color: #000;
            background-color: #FC4B38;
            margin: auto;
            }
        #x{
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 20px;
            ling-height: 20px;
            background-color: #556B2F;
        }
    </style>
</head>
<body>
<button id="btn">弹出</button>
<script type="text/javascript">
    var btn=document.getElementById("btn");//通过元素ID获取dom元素
    //创建一个div元素
    var odiv=document.createElement("div");
    var op=document.createElement("p");
    var ospan=document.createElement("span");
    ospan.innerHTML="X";
    ospan.id="x";
    op.id="content";
    //给当前元素添加内容
    op.innerHTML="模态框弹出";
    //添加子节点
    odiv.appendChild(op);
    op.appendChild(ospan);
    odiv.id="box";
    btn.onclick=function (ev) {
        //动态添加html元素,将divDom插入到btn前面
        //this表示btn对象
        this.parentNode.insertBefore(odiv,btn)
    };

    ospan.onclick=function (ev) {
        //获取到它的父节点，再通过父节点来删除它自己
        odiv.parentNode.removeChild(odiv);
    }
</script>
</body>
</html>
View Code
  • 获取节点元素
  • 创建节点元素
  • 设置节点对象属性
  • 添加对象属性内容
  • 在节点兑现 前后添加新的对象
  • 删除对象元素前后对象

 

posted @ 2018-06-15 08:34  丫丫625202  阅读(155)  评论(0)  编辑  收藏  举报