1

私は本当に解決できない問題に遭遇しました。

サインアップとログインフォームを作成し、自分でフォーム検証エラーのポップアップを作成しましたが、実際には機能していません。

モーダルよりも高い z-index を追加しましたが、ボックスから流れ出して、oveflor を広告します。ここに画像の説明を入力

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

1 に答える 1

0

このように、 cssのp *タグ*を削除します。 style sheet

  .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/

于 2012-06-26T09:29:04.853 に答える