<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>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
