css实现简单弹框

写一个简单的弹框

html:

<button onclick=""bombClick()">点击弹框</button>

<div id="bombContain"></div>

<div id="bomb_div"></div>

css:

#bombContain{

z-index: 199412204822; //z-index只有在定位元素上生效，默认值static是没有定位的

background-color:#000;

opacity:0.6;

top:0;

left:0;

width:100%;

height:100%;

position:fixed;

display:none;

}

#bomb_div{

z-index:199412204822;

width:34%;

height:450px;

top:66px;

left:36%;

margin:0;

padding:0;

background-color:#fff;

box-shadow:1px 1px 50px rgba(0,0,0,.3);

position:fixed;

display:none;

}

js:

function bombClick(){

$("#bombContain").css("display","block");

$("#bomb_div").css("display","block");

}