一个简单实用的弹出层
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//打开弹出层
$('.alertDivBtn').click(function(){
$('.ui-outer-alert-div,.ui-inner-alert-div').attr('style','display:block;');让默认的弹出层遮盖层显示出来就好了
});
//关闭弹出层
$('.closeAlertDiv').click(function(){
$('.ui-outer-alert-div,.ui-inner-alert-div').removeAttr('style');点击remove掉display:block
});
})
</script>
<style type="text/css">
body{ font-size:12px; margin:0; padding:0; height:100%;}这里的高度为百分百，否则ie6遮盖层不下来
.ui-outer-alert-div{ position:absolute; left:0; top:0; width:100%; height:100%; background:#0000FF; z-index:10000; display:none; opacity:0.2; filter:alpha(opacity=20);}
.ui-inner-alert-div{ position:absolute; left:50%; top:50%; width:400px; height:200px; border:1px solid #0066FF; margin-left:-200px; margin-top:-100px; background:#fff; z-index:10001; display:none;}弹出层居中用到margin负值
.ui-inner-alert-title{ height:30px; line-height:30px; background:#0099CC; color:#fff; font-weight:900; text-indent:1em; font-size:14px; width:100%; cursor:move;}
.closeAlertDiv{ margin:10px; display:inline-block;}
</style>
</head>
<body>
<input type="button" value="弹出层" class="alertDivBtn" />
<div class="ui-outer-alert-div"></div>这是遮盖层
<div class="ui-inner-alert-div">这是弹出层
<div class="ui-inner-alert-title">提示框</div>
<a class="closeAlertDiv" href="#">关闭</a>
</div>
</body>
<script type="text/javascript">
$(function(){
//打开弹出层
$('.alertDivBtn').click(function(){
$('.ui-outer-alert-div,.ui-inner-alert-div').attr('style','display:block;');让默认的弹出层遮盖层显示出来就好了
});
//关闭弹出层
$('.closeAlertDiv').click(function(){
$('.ui-outer-alert-div,.ui-inner-alert-div').removeAttr('style');点击remove掉display:block
});
})
</script>
<style type="text/css">
body{ font-size:12px; margin:0; padding:0; height:100%;}这里的高度为百分百，否则ie6遮盖层不下来
.ui-outer-alert-div{ position:absolute; left:0; top:0; width:100%; height:100%; background:#0000FF; z-index:10000; display:none; opacity:0.2; filter:alpha(opacity=20);}
.ui-inner-alert-div{ position:absolute; left:50%; top:50%; width:400px; height:200px; border:1px solid #0066FF; margin-left:-200px; margin-top:-100px; background:#fff; z-index:10001; display:none;}弹出层居中用到margin负值
.ui-inner-alert-title{ height:30px; line-height:30px; background:#0099CC; color:#fff; font-weight:900; text-indent:1em; font-size:14px; width:100%; cursor:move;}
.closeAlertDiv{ margin:10px; display:inline-block;}
</style>
</head>
<body>
<input type="button" value="弹出层" class="alertDivBtn" />
<div class="ui-outer-alert-div"></div>这是遮盖层
<div class="ui-inner-alert-div">这是弹出层
<div class="ui-inner-alert-title">提示框</div>
<a class="closeAlertDiv" href="#">关闭</a>
</div>
</body>
