模态框案例

Posted fmgao-technology

tags:

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

<body>
    <button id="btn">弹出</button>
</body>
*{padding: 0;margin: 0;}
html,body{height: 100%;}
#box{width: 100%;height: 100%;background: rgba(0,0,0,.3);}
#content{
    position: relative;
    top: 150px;
    width: 400px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: red;
    background-color: #fff;
    margin: auto;
}
#span1{
    position: absolute;
    background-color: red;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
}
//dom  Document Object Model

//树状结构
/*
    html
head    body  节点
    span div button img ....

  */

//获取dom元素
var btn = document.getElementById(‘btn‘)

//创建divdom元素
var oDiv = document.createElement(‘div‘)
var oP = document.createElement(‘p‘)
var oSpan = document.createElement(‘span‘)


oDiv.id = ‘box‘;
oP.id = ‘content‘
oP.innerHTML = ‘模态框成功弹出‘
oSpan.innerHTML = ‘X‘;
oSpan.id = ‘span1‘


oDiv.appendChild(oP)
oP.appendChild(oSpan)


//给按钮添加点击事件
btn.onclick = function(){
  //动态的添加到body中一个div
    console.log(this);//当前this指向的是当前按钮元素
    this.parentNode.insertBefore(oDiv,btn)

}
oSpan.onclick = function(){
// removeChild()

    oDiv.parentNode.removeChild(oDiv)
}

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

模态框案例

6.2.11 模态框案例

模态框

简单的 html拖动模态框 案例

element.parentNode案例:关闭模态框

js+css+html点击登录后弹出可拖拽的模态框