模态背景覆盖的Bootstrap模型
[英]Bootstrap model covered by modal backdrop
问题描述
I have simple html page to show bootstrap modal, however when I launch the model - it gets covered by modal backdrop, I checked the z- index of myModal - 1040 and that of modal backdrop is 1030 checked all posts in stackoverflow but none of them solve my issue please help 
我有一个简单的html页面来显示引导模态，但是当我启动模型时-被模态背景覆盖了，我检查了myModal的z-索引-1040，模态背景的z-索引是1030，检查了stackoverflow中的所有帖子，但没有一个解决我的问题，请帮忙
<html>
<head>
<link href="" rel="stylesheet">
<link href="Content/bootstrap.min.css" rel="stylesheet">
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div id="myModal" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
</body>
</html>
2 个解决方案
解决方案1
2 已采纳 2015-12-26 02:10:56
You forgot a few things, which are: 您忘记了几件事：
- the
<div class="modal-dialog"><div class="modal-dialog"> - the
<div class="modal-content"><div class="modal-content">
You also added some unecessary things which are: 您还添加了一些不必要的内容：
- the
hideclass on the<div id="myModal" class="modal fade in" aria-hidden="true"><div id="myModal" class="modal fade in" aria-hidden="true">上的hide类 - the
inclass on the<div id="myModal" class="modal fade in" aria-hidden="true">在in类的<div id="myModal" class="modal fade in" aria-hidden="true">
Your working code will look like this: 您的工作代码如下所示：
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div id="myModal" class="modal fade in" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
</div>
</div>
Here's a JsFiddle to show it in a working environment. 这是一个在工作环境中展示它的JsFiddle 。
To read everything about the modal, please check this 要阅读有关模态的所有信息，请检查此
Hope this helps! 希望这可以帮助！
解决方案2
0 2015-12-26 02:08:15
Remove the hide class from your modal. 从模态中删除hide类。
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div id="myModal" class="modal fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.