[英]Twitter bootstrap modal z-index not working
I ran in to a problem what i cant really solve. 我遇到了一个我无法真正解决的问题。
I created a signup and login form, made a form validation error popup by my self, and its not really working. 我创建了一个注册和登录表单,由我自己创建了一个表单验证错误弹出窗口,并且它实际上没有工作。
i added a higher z-index to it than the modals but i would flow out of the box it ads an oveflor to it. 我给它添加了比模态更高的z索引,但我会从盒子中流出来,它向它发出了oveflor。
html 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 的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;
}
and the modals z-index is z-index: 1050; 模态z-index是z-index:1050;
So could please someone give me a hint what i am missing? 所以可以请别人给我一个提示我缺少什么吗?
Thank you 谢谢
EDIT 编辑
Could be a problem with the js? 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;
});
Hey now remove your p * tag * in your css style sheet
as like this 嘿,现在像这样删除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;
}
Into this 入这个
.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;
}
Live demo http://jsfiddle.net/MrzAS/2/ 现场演示http://jsfiddle.net/MrzAS/2/
Updated demo http://jsfiddle.net/MrzAS/3/ 更新了演示http://jsfiddle.net/MrzAS/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.