javascript - 页面叠加问题

问题描述

问 题

如图登入弹框和页面出现了混合叠加效果

相关代码如下：

页面html

  <div id="borrowIn" style="width:586px;background-color: #fff;margin-bottom:10px;" class='pull-right'>
                    <h3>借入</h3>
                    <div style='padding:20px;position:relative;padding-bottom:20px;'>
                        <div style="width:240px;float:left;padding-bottom:70px;">
                            <p>有<span>域名</span>轻松借贷</p>
                            <p><span>免</span>各种材料审核</p>
                            <p>有效利用<span>闲置</span>资产</p>
                            <p style='padding-bottom:20px'><span>安全、快捷</span>到账</p>
                        </div>
                        <div style="width:140px;float:right">
                            <img src="./img/icon1.png" style='margin-top:40px;'>
                        </div>
                        <div style="border-bottom:2px dashed #D3D0D0" class="clearfix"></div>
                    </div>
                    <center>
                        <button type='button' class='btn' style="outline:none">立即申请</button>
                    </center>
                </div>
                

登入框html

<div class="login-modal clearfix">
        <!-- mask -->
        <div class="login-overlay"></div>
        <!-- 登入框 -->
        <div class="login-modal-main container">
            <!-- header -->
            <div class="login-header">
                <div class="switch row text-center" id="switch">
                    <div class="switch_btn_focus col-xs-6" id="login" style="cursor: pointer;"><a href="javascript:void(0);" tabindex="7">快速登录</a></div>
                    <div class="col-xs-6" id="register" style="cursor: pointer;"><a href="javascript:void(0);" tabindex="8">快速注册</a></div>
                </div>
            </div>
            <!--登录-->
            <div id="web_qr_login" style="display: block;">
                <form id="login-form" accept-charset="utf-8" method="post">
                    <ul class="reg_form">
                        <div id="login-tip" class="cue">请登录</div>
                        <li>
                            <label for="login-tel" width="24px" height="24px"></label>
                            <input type="text" id="login-tel" name="tel" maxlength="16" class="inputStyle" placeholder="用户名">
                        </li>
                        <li>
                            <label for="login-password"></label>
                            <input type="password" id="login-password" name="password" maxlength="10" class="inputStyle" placeholder="密码">
                        </li>
                        <li>
                            <button class="submit-btn" type="submit">登录</button>
                        </li>
                    </ul>
                </form>
                <!--登录end-->
            </div>
            <!--注册-->
            <div id="web_qr_register" style="display: none;">
                <form id="register-form" accept-charset="utf-8" method="post">
                    <ul class="reg_form">
                        <div id="register-tip" class="cue">请注册</div>
                        <li>
                            <label for="register-tel"></label>
                            <input type="text" id="register-tel" name="tel" maxlength="11" class="inputStyle" placeholder="请输入手机号">
                        </li>
                        <li>
                            <label for="register-password"></label>
                            <input type="password" id="register-password" name="password" maxlength="10" class="inputStyle" placeholder="密码">
                        </li>
                        <li>
                            <input type="text" id="captcha" name="captcha" maxlength="4" class="inputStyle" style="width: 150px;margin-top: 20px" placeholder="动态密码">
                            <div class="get-captcha" id="send-captcha">获取验证码</div>
                        </li>
                        <li>
                            <button id="reg" class="submit-btn" type="submit">注册</button>
                        </li>
                    </ul>
                </form>
            </div>
            <!--注册end-->
        </div>
    </div>

登入框css

a {
    text-decoration: none;
    outline: none;
}

ul li {
    list-style-type: none;
}

.login-modal {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.login-overlay {
    background-color: #000;
    opacity: 0.25;
    width: 100%;
    height: 100%;
    z-index: 22;
}

.login-modal-main {
    width: 370px;
    margin: 0 auto;
    position: absolute;
    background-color: #fff;
    border-radius: 5px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    padding: 0 38px 10px 38px;
}

.login-header {
    height: 50px;
    border-bottom: 1px solid #e2e2e2;
    position: relative;
    font-size: 16px;
}

.login-header a {
    line-height: 50px;
    text-decoration: none;
    outline: none;
}

.switch_btn_focus {
    border-bottom: 2px solid #FEB91E;
}

.cue {
    width: 100%;
    padding: 8px 0;
    text-align: center;
    border: 1px solid #eee;
    margin-top: 20px;
    color: green;
}

.inputStyle {
    height: 34px;
    line-height: 34px;
    border: 1px solid #D7D7D7;
    background: #fff;
    color: #333;
    font-size: 16px;
    width: 100%;
}

input {
    -webkit-appearance: none;
}

.submit-btn {
    display: block;
    border: none;
    background-color: #38f;
    padding: 10px 0;
    width: 100%;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    color: white;
    border-radius: 3px;
    margin-top: 20px;
}

.get-captcha {
    background-color: #38f;
    border: medium none;
    color: white;
    cursor: pointer;
    font-size: 14px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    width: 110px;
    float: right;
    margin-top: 20px;
    border-radius: 3px;
}

.reg_form {
    padding: 0;
}

求大神指出我的错误！

解决方案

为 CSS 样式 .login-modal 添加 z-index 属性，使其层级大于 #borrowIn 元素。

这篇关于javascript - 页面叠加问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！