[英]Twitter bootstrap modal z-index not working
我遇到了一个我无法真正解决的问题。
我创建了一个注册和登录表单,由我自己创建了一个表单验证错误弹出窗口,并且它实际上没有工作。
我给它添加了比模态更高的z索引,但我会从盒子中流出来,它向它发出了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;
});
嘿,现在像这样删除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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.