前端开发原生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,事件是可以用等号连接的,代表使用同一种方法。

网易游戏前端开发
前端开发游戏卡顿原因
游戏开发是wed前端开发吗
» 本文来自:前端开发者 » 《前端开发原生js练习_弹出层》
» 本文链接地址:https://www.rokub.com/7061.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!