你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
输入关键字进行搜索
搜索:
发现
话题
注册
登录
modal
modal 弹出后 跟旁边一样是黑灰的 整个屏幕是黑灰的
modal 弹出后 跟旁边一样是黑灰的 整个屏幕是黑灰的 怎么解决?
没有找到相关结果
已邀请:
与内容相关的链接
提交
6 个回复
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?
要回复问题请先
登录
或
注册
相关问题
模态框弹出后如何获得焦点(已经解决)
Modal的内容从外部html中加载过来,怎么为内容里面的元素绑定事件
请问大神,弹出框里能加链接吗?
屏幕尺寸固定的情况下bootstrap的同个级别下的栅格为何一个是md一个是lg?
急求:Bootstrap 模态窗(Modal)与提示工具(Tooltip)怎样同时使用在一个按钮上
bootstrap modal插件 不设置按钮能打开对话框吗?
每次缩小窗口的时候,整个page的结构就不对了,屏幕上的很多东西都会重叠在一起
Bootstrap怎么自定义弹出模态窗体?
求教关于bootstrap3使用弹出框的问题
Modal窗在手机端,输入法一打开就只显示一部分,且无法输入的问题
jquery的load方法与模态框的$("#identified").modal('hide')不能一块使用
问题状态
最新活动:
2015-08-22 18:13
浏览:
10467
关注:
3
人
6 个回复
rew1011
赞同来自:
pandongxia
赞同来自:
rew1011
赞同来自:
pandongxia
赞同来自:
<nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation">这种固定在顶部的导航的。 一直是灰的。
现在我把顶部改为<nav class="navbar navbar-default" role="navigation">, 再嵌入就没问题了,应该就是冲突的问题。 有人知道如何解决这种冲突吗?
pandongxia
赞同来自:
<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
赞同来自: