弹出层提示框---原创


<html>
<style>
#fullbg { background-color:Gray; left:0px; opacity:0.5; position:absolute; top:0px; z-index:3; filter:alpha(opacity=50); /* IE6 */ -moz-opacity:0.5; /* Mozilla */ -khtml-opacity:0.5; /* Safari */ }
#dialog { background-color:#FFF; border:1px solid #888; display:none; height:100px; left:50%; margin:-100px 0 0 -100px; padding:12px; position:fixed !important; /* 浮动对话框 */ position:absolute; top:50%; 200px; z-index:5; }
#dialog p {margin:0 0 12px; }
#tishi p.close { text-align:right; font-size:12px;}
#tishi { font-size:12px;}
#tishi .tishi1{padding-left:0px; }
#tishi .tishi2{padding-left:70px; }
#tishi .tishi2 a{ color:#F00; cursor: pointer; text-decoration:underline}
#contents {font-size:12px;color:blue;text-align:center;padding-top:10px;}
</style>
<div id="fullbg"></div>
<div id="dialog">
<div id="tishi"><span class="tishi1">提示信息</span><span class="tishi2"><a target="_self" class="close" onclick="closeBg();">关闭</a></span></div>
<hr/>
<div id="contents">提示内容</div>
</div>
<script type="text/javascript" src="http://img.tiandaoedu.com/index/2012/js/jquery.js"></script>
<script type="text/javascript">
function showBg() {
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({ height:bh, bw, display:"block" });
$("#dialog").show();
}
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>

<body>
<input type="button" value="showBg" onclick="showBg()"/>
</body>

</body>

</html>

原文地址:https://www.cnblogs.com/lixiuran/p/3303692.html