首页 > 其他 > 详细

6.2.11 模态框案例

时间:2018-07-21 19:06:35      阅读:156      评论:0      收藏:0      [点我收藏+]

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 模态框案例

原文:https://www.cnblogs.com/beallaliu/p/9347600.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!