jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > jquery CSS悬浮登录框遮罩

jquery+CSS实现悬浮登录框遮罩

作者:kylinxjd

这篇文章主要为大家详细介绍了jquery+CSS实现悬浮登录框遮罩,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jquery+CSS实现悬浮登录框遮罩的具体代码,供大家参考,具体内容如下

先上效果图,阴影部分无法点击

HTML代码

<div style="display: none" class="shadow" id="shadow"></div>
<div style="display: none" id="login-box" class="login-box">
    <div class="close-btn">
        <img src="./img/close.jpg" width="30" height="30" id="close-login-btn" alt="">
    </div>
    <div class="input-item">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" placeholder="用户名/邮箱/手机号码">
    </div>
    <div class="input-item">
        <label for="password">密 码</label>
        <input type="password" name="password" id="password" placeholder="密码">
    </div>
    <div class="input-item">
        <label for="check-code">验证码</label>
        <input type="text" name="check-code" id="check-code" placeholder="验证码">
        <!--<button type="button" id="get-check-code"> </button>-->
        <div id="req_pic_code" >
            <img src="" id="get-check-code" alt="">
        </div>
        <!--<img src="" id="get-check-code" alt="">-->
    </div>
    <div class="input-item">
        <button type="button" id="login-btn">登 录</button>
    </div>
    <div class="input-item">
        <img src="./pic/QQ.jpg" width="50" height="50" alt="">
        <img src="./pic/微信.jpg" width="50" height="50" alt="">
        <img src="./pic/微博.jpg" width="50" height="50" alt="">
    </div>
    <div class="input-item">
        <!--登录即代表你同意 《用户协议》, 《隐私政策》和 中移动认证服务协议-->
        <span>登录即代表你同意</span>
        <a href="#">《用户协议》</a>
        <span>,</span>
        <a href="#">《隐私政策》</a>
        <span>和</span>
        <a href="#">中移动认证服务协议</a>
    </div>
</div>

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();
    });

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

您可能感兴趣的文章:
阅读全文