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;
    width: 500px;
    height: 350px;
    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();
    });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。