6.2.11 模态框案例

Posted beallaliu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了6.2.11 模态框案例相关的知识,希望对你有一定的参考价值。

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)

  }

 

以上是关于6.2.11 模态框案例的主要内容,如果未能解决你的问题,请参考以下文章

模态框案例

综合运用之拖动模态框案例

element.parentNode案例:关闭模态框

简单的 html拖动模态框 案例

模态框

前端9bootstrap:模态框/轮播图,旅游首页