验证中...
码云账号不再使用社区账号进行二次身份验证的通知 详情
Your message has been delivered
Languages: JavaScript
Categories: JavaScript 工具
Latest update 2017-10-13 17:15
Snippet 1 Snippet 2 Snippet 3
遮罩css
Raw Copy
<style type="text/css">
#overlayDiv {
background: #000;
filter: alpha(opacity=50); /* IE的透明度 */
opacity: 0.5; /* 透明度 */
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100; /* 此处的图层要大于页面 */
display: none;
}
#tipsDiv {
width: 292px;
position: absolute;
background-color: #FFF;
margin: 0 auto;
display: none;
z-index: 101; /* 此处的图层要大于页面 */
border-radius: 5px;
}
</style>
遮罩html
Raw Copy
<div id="overlayDiv"></div>
<div id="tipsDiv"></div>
遮罩js
Raw Copy
<script>
//显示服务中心窗口
function showTipsDiv() {
showOverlayDiv();
popTipsDivWindow();
}
//关闭服务中心帮助窗口
function closeTipsWindow() {
$("#tipsDiv").fadeOut("slow");
$("#overlayDiv").fadeOut("slow");
}
// 显示遮罩层
function showOverlayDiv() {
$("#overlayDiv").height(document.body.scrollHeight);
$("#overlayDiv").width(document.body.scrollWidth);
$("#overlayDiv").fadeTo(200, 0.5);
}
//弹出服务中心窗口的方法
function popTipsDivWindow() {
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var popHeight = $("#tipsDiv").height();
var popWidth = $("#tipsDiv").width();
//计算弹出窗口的左上角Y的偏移量
var popY = (windowHeight - popHeight) / 2;
var popX = (windowWidth - popWidth) / 2;
//设定窗口的位置
$("#tipsDiv").css("top", popY).css("left", popX).slideToggle("slow");
}
</script>

Comment list( 0 )

You need to Sign in for post a comment

2_float_left_people 2_float_left_close