前端开发原生js练习_弹出层

今天我们学习的是JavaScript中的DOM操作。

html：

<button id=”pop”>登录</button>
<div id=”wrap”></div>
<div id=”box”>
<h3>我是弹出层(づ｡◕‿‿◕｡)づ</h3>
</div>

css：

wrap {

        background: #000;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.4;
        filter: alpha(opacity = 40);
        z-index: 100;  // 这里设置的数值只要比0大都可以哦，目的是为了让该div层处于上层
        display: none;
    }
    #box {
        width: 400px;
        height: 300px;
        background: pink;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        display: none;
        z-index: 101;  // 这里是一个登录框，我就简单的用div代替了，这里的目的是处于wrap的上层
    }
    #box h3 {
        text-align: center;
        line-height: 250px;
    }

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
这里的代码的意思是为了让该div在浏览器中居中显示，所以我单独拿出来，也算是一个小技巧吧，这时候的

接下来就是写js代码的时候啦：
window.onload = function () {
var pop = document.getElementById(‘pop’),
wrap = document.getElementById(‘wrap’),
box = document.getElementById(‘box’);

        pop.onclick = function () {
            wrap.style.display = 'block';
            box.style.display = 'block';
        };

        wrap.onclick = box.onclick = function () {
            wrap.style.display = 'none';
            box.style.display = 'none';
        }
    }

是不是很简单呢？记住这里：wrap.onclick = box.onclick，事件是可以用等号连接的，代表使用同一种方法。