jquery+CSS实现悬浮登录框遮罩代码示例

本篇文章小编给大家分享一下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();

});