本篇文章小编给大家分享一下jquery+CSS实现悬浮登录框遮罩代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
效果图,阴影部分无法点击
HTML代码
css代码
/* 半透明的遮罩层 */
.shadow {
background: #000;
filter: alpha(opacity=70); /* IE的透明度 */
opacity: 0.5; /* 透明度 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 965; /* 此处的图层要大于页面 */
}
.login-box {
text-align: center;
border-radius: 10px;
/*border: 3px solid gainsboro;*/
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #ffe3e1;
-webkit-box-shadow: #666 0 0 6px;
-moz-box-shadow: #666 0 0 6px;
box-shadow: #fff8e7 0 0 6px 6px;
z-index: 996; /* 此处的图层要大于遮罩图层 */
}
jQuery代码
//登录,点击登录显示登录框
$("#login-link").click(function () {
$("#login-box").show();
$("#shadow").show();
});
//关闭登录框,点击关闭按钮关闭
$("#close-login-btn").click(function () {
$("#login-box").hide();
$("#shadow").hide();
});