1. 程式人生 > >實現彈出層,遮罩層

實現彈出層,遮罩層

point func relative cit get alpha fun javascrip pla

開發中經常會用到彈出遮罩層的時候,下面是一個簡單的遮罩層彈窗


<style type="text/css">
<!--
body,td,th {
font-size: 12px; padding:0; margin:0;
}
.tanchuang{ width:100px; height:100px;position:absolute;left: 0px;top: 0px;z-index:100; display:none;}
.box{width:600px;z-index:101; height:400px;background-color:red;filter:alpha(Opacity=20);-moz-opacity:0.2;opacity: 0.2; position:absolute; top:0px; left:0px;}
.tanchuang_content{width:353px;height:153px;border:solid 1px #f7dd8c;background-color:#FFF;position:absolute;z-index:105;left: 123px;top: 123px;}
-->
</style>
<script language="javascript">
function close(divId){
document.getElementById(divId).style.display = ‘none‘;
}
function show(divId){
document.getElementById(divId).style.display = ‘block‘;
}
</script>

<body>
<div style="width:400px; height:400px; position:relative; text-align:center;">
<div class="tanchuang" id="a">
<div class="box"></div>
<div class="tanchuang_content">
<p><span onClick="close(‘a‘)" style=" cursor:pointer;">X</span></p>
彈窗內容</div>
</div>
<span onclick="show(‘a‘)" style="cursor:pointer;">點擊出現彈窗</span>
</div>

實現彈出層,遮罩層