6.2.11 模态框案例

Posted 2020-12-27 beallaliu

DOM 文档对象模型

<style type="text/css">

　　html,body{height:100%}

　　#box{width:100%;height:100%;backgroud:rgba(0,0,0,0.3)}

　　#content{

　　　　postition: relative;

　　　　top: 150px;

　　　　width: 400px;

　　　　height:200px;

　　　　line-height:200px;

　　　　text-align: center;

　　　　color: red;

　　　　backgroupd-color: #fff;

　　　　margin: auto;

　　}

　　#span1{

　　　　position: absolute;

　　　　backgroud-color:red;

　　　　top: 0;

　　　　right:0;

　　　　width:30px;

　　　　height:30px;

　　　　line-height:30px;

　　　　text-align:center;

　　　　color:#fff;

　　}

</style>

 

//获取dom元素

var btn = document.getElementById(‘btn‘)

console.log(btn)

// 创建div dom元素

var oDiv = document.createElement(‘div‘)

var oP = document.createElement(‘p‘)

var oSpan = document.createElement(‘span‘)

oDiv.id = ‘box‘

oP.id = ‘content‘

oSpan.id = ‘span1‘

oSpan.innerHTML=‘X‘;

 

oP.innerHTML = "模态框成功弹出"

oDiv.appendChild(op)

oP.appendChild(oSpan)

btn.onclick= function(){

　　//alert(111)

　　// 动态地添加body中的一个div

　　console.log(btn.parentNode)

　　console.log(this)

 　　this.parentNode.insertBefore(oDiv,btn)  //oDiv插入到btn的前面

}

oSpan.onclick = function(){

　　//removeChild

　　oDiv.parentNode.removeChile(oDiv)

　　}