Question

我遇到了一个我无法解决的问题。

我创建了一个注册和登录表单，由我自己制作了一个表单验证错误弹出窗口，但它并没有真正起作用。

我为它添加了一个比模态更高的z-index，但我会开箱即用，它会向它广告。 enter image description here

html

   <div class="m-controls">
      <label class="pull-left" for="identity">Email *</label>
        <input type="text" name="identity" class="pull-right" id="identity" />
        <div class="login_email_error"></div>
    </div>
    <div class="clear"></div>
    <div class="m-controls">
      <label class="pull-left" for="password">Password *</label>
        <input type="password" name="password" class="pull-right" id="password" />
        <div class="login_password_error"></div>
    </div>

css

.m-controls {
    position: relative;
}

.login_email_error p,
.login_password_error p {
    background: #fdfbe8;
    border: 1px solid #dfd8c4;
    color: #b74a46;
    text-align: center;
    padding: 5px 10px;
    font-size: 11px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    top: -2px;
    left: 330px;
    width: 290px;
    z-index: 1052;
}

和模态z-index是z-index：1050;

那么请有人给我一个暗示我缺少的东西吗？

谢谢

修改

可能是js的问题吗？

// login
        $('.login-form').on('submit', function(){
            var loginData = $(this).serialize();
            $.ajax({
                url: "<?php echo base_url(); ?>user/login",
                type: "POST",
                data: loginData,
                dataType: "json",
                success: function(data)
                {
                    if(data.error == 0)
                    {
                        $('.login_email_error').append().html(data.identity);
                        $('.login_password_error').append().html(data.identity);

                    } else if(data.error == 1)
                    {
                        location.reload();
                    }
                }

            });

           return false;
        });

Answer 1

嘿现在删除 css style sheet中的 p * 标记 *，就像这样

  .login_email_error p,
.login_password_error p {
    background: #fdfbe8;
    border: 1px solid #dfd8c4;
    color: #b74a46;
    text-align: center;
    padding: 5px 10px;
    font-size: 11px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    top: -2px;
    left: 330px;
    width: 290px;
    z-index: 1052;
}

进入

.login_email_error ,
.login_password_error  {
    background: #fdfbe8;
    border: 1px solid #dfd8c4;
    color: #b74a46;
    text-align: center;
    padding: 5px 10px;
    font-size: 11px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    top: -2px;
    left: 330px;
    width: 290px;
    z-index: 1052;
}

现场演示http://jsfiddle.net/MrzAS/2/

已更新演示http://jsfiddle.net/MrzAS/3/

Twitter bootstrap模态z-index不起作用

1 个答案: