原生html页面弹窗_原生弹窗.html

js

html,body{height:100%;overflow:hidden;}

body,div,h2{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

center{padding-top:10px;}

button{cursor:pointer;margin: auto;}

#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}

#win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}

h2{font-size:12px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;}

h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}

弹出层

x

var aBtn = document.getElementsByTagName('button')[0];

var oDiv1 = document.getElementById('overlay');

var oDiv2 = document.getElementById('win');

var oSpan = oDiv2.getElementsByTagName('span')[0];

aBtn.onclick = function(){

oDiv1.style.display = 'block';

oDiv2.style.display = 'block';

}

oSpan.onclick = function(){

oDiv1.style.display = 'none';

oDiv2.style.display = 'none';

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史