modal 弹出后 跟旁边一样是黑灰的 整个屏幕是黑灰的

modal 弹出后 跟旁边一样是黑灰的 整个屏幕是黑灰的 怎么解决?
已邀请:

rew1011

赞同来自:

那叫遮罩效果,没有属性可以关闭。非要关的话只能改CSS源码。

pandongxia

赞同来自:

请问要改CSS源码里面的什么属性啊? 我也碰上这个问题啊

rew1011

赞同来自:

opacity透明度,还有IE独有的兼容属性,filter: alpha(opacity=数字);

pandongxia

赞同来自:

我找到原因了,我原来想把modal嵌入到
<nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation">这种固定在顶部的导航的。 一直是灰的。
现在我把顶部改为<nav class="navbar navbar-default" role="navigation">, 再嵌入就没问题了,应该就是冲突的问题。 有人知道如何解决这种冲突吗?

pandongxia

赞同来自:

需求:在navigation中有一个"登录"链接,想做成Modal的,就不用弹新的网页了。我的代码如下:
<nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="animbrand">
<a class="navbar-brand animate" href="">HelenService</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right">

<li class=""><a href="http://bootsnipp.com/register" class="animate">注册</a></li>
<!--p class="text-center"><a href="#" class="btn btn-primary btn-lg" role="button" data-toggle="modal" data-target="#login-modal">Open Login Modal</a></p-->
<li class="animate"><a href="#" class="btn" role="button" data-toggle="modal" data-target="#login-modal">登录</a>

</li>
<!-- BEGIN # MODAL LOGIN -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center">
<img class="img-circle" id="img_logo" src="http://bootsnipp.com/img/logo.jpg";>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<!-- Begin # DIV Form -->
<div id="div-forms">
<!-- Begin # Login Form -->
<form id="login-form">
<div class="modal-body">
<div id="div-login-msg">
<div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-login-msg">Type your username and password.</span>
</div>
<input id="login_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
<input id="login_password" class="form-control" type="password" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
</div>
<div>
<button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
<button id="login_register_btn" type="button" class="btn btn-link">Register</button>
</div>
</div>
</form>
<!-- End # Login Form -->
<!-- Begin | Lost Password Form -->
<form id="lost-form" style="display:none;">
<div class="modal-body">
<div id="div-lost-msg">
<div id="icon-lost-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-lost-msg">Type your e-mail.</span>
</div>
<input id="lost_email" class="form-control" type="text" placeholder="E-Mail (type ERROR for error effect)" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Send</button>
</div>
<div>
<button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="lost_register_btn" type="button" class="btn btn-link">Register</button>
</div>
</div>
</form>
<!-- End | Lost Password Form -->
<!-- Begin | Register Form -->
<form id="register-form" style="display:none;">
<div class="modal-body">
<div id="div-register-msg">
<div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-register-msg">Register an account.</span>
</div>
<input id="register_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
<input id="register_email" class="form-control" type="text" placeholder="E-Mail" required>
<input id="register_password" class="form-control" type="password" placeholder="Password" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Register</button>
</div>
<div>
<button id="register_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
</div>
</div>
</form>
<!-- End | Register Form -->
</div>
<!-- End # DIV Form -->
</div>
</div>
</div>
<!-- END # MODAL LOGIN -->
</ul>
</div>
</div>

</nav>
这个Modal弹出来总是灰的。
有什么建议啊?

rew1011

赞同来自:

modal可以在HTML的任意位置,它不会与其它元素涉及到布局的问题,所以你不用把modal放到任何元素中,单独出来就可以,通过某按钮去触发这个modal就可以了,你没看官网的demo?

要回复问题请先登录注册