twitter-bootstrap 引导模式根本不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17142790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap modal not working at all
提问by Lulzim
I know this question has been asked hundred of times before and I've been through them but those couldn't fix my case :s
我知道这个问题之前已经被问过数百次了，我也经历过这些问题，但这些都无法解决我的问题：s
This is my code so far
到目前为止，这是我的代码
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<link href="bootstrap/js/bootstrap.min.js" rel="stylesheet" media="screen">
<link href="bootstrap/js/bootstrap-modal.js" rel="stylesheet" media="screen">
<link href="bootstrap/js/bootstrap-transition.js" rel="stylesheet" media="screen">
and inside body I have this:
在身体内部我有这个：
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
Note that I use some other libraries on the head section because I need them for Google Map maybe, I tried to remove those but still didn't trigger the Modal view.
请注意，我在 head 部分使用了一些其他库，因为我可能需要它们用于 Google Map，我尝试删除它们但仍然没有触发 Modal 视图。
回答by sarvesh
have you used the cdn or file popper.jsIf you not include popper.jsfile you wont be able to see your modal windows
check the below cdn and put below jquery.jsand bootstrap.jsas follows below
您是否使用过 CDN 或文件popper.js如果您不包含popper.js文件，您将无法看到您的模态窗口，请检查下面的 CDN 并将其放在下面jquery.js，bootstrap.js如下所示
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphRtheitroadBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Now it will work 100% if not I have another solution copy the below code and check it
现在它将 100% 工作，如果不是我有另一个解决方案复制下面的代码并检查它
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
回答by Jyothu
Add this line to Javascript file
将此行添加到 Javascript 文件
$(document).ready(function() {
$("#MyModal").modal();
});
回答by levelnis
You've got all of your scripts and css files loaded inside a script tag - take out the script tag that wraps the rest.
您已将所有脚本和 css 文件加载到脚本标记中 - 取出包装其余部分的脚本标记。
回答by Ashutosh Singh
Before posting my complete solution i would like to know , have you initialized your modal before loading it. Initialization:-
在发布我的完整解决方案之前，我想知道，您是否在加载之前初始化了您的模态。初始化：-
$(function(){
$('#myModal').modal({
show:true,
backdrop:'static'
});
//now on button click
$('#myModal').modal('show');
});
回答by ComEngineer
I have the same issue; After long analyse i find the solution : Adding "style="display:none;" on div modal. I don't know why but when you load the page the modal is hidden, but if you inspect with firebug the modal recover the dropdown. After shown the modal and hidden it; the js add "style="display:none;" and dropdown works.
我有同样的问题; 经过长时间的分析，我找到了解决方案：在 div modal 上添加 "style="display:none;"。我不知道为什么，但是当你加载页面时，模式是隐藏的，但是如果你用萤火虫检查，模式会恢复下拉菜单. 显示模态并隐藏后，js添加"style="display:none;" 和下拉工作。
回答by Abdulla Nilam
Use below online bootstrap library or Download from here
使用下面的在线引导库或从这里下载
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
and paste this link before bootstrap.jslink
并在bootstrap.js链接之前粘贴此链接
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Cz bootstrap model not working with older JS Editions(Can check here)
Cz 引导模型不适用于较旧的 JS 版本（可以在此处查看）
and in bootstrap model remove hideclass from here class="modal fade"
并在引导模型中hide从这里删除类class="modal fade"
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
this should work perfectly.
这应该可以完美运行。
回答by Alok Pant
You are not supposed to put the CSS file inside tag!
你不应该把 CSS 文件放在标签中！
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<link href="bootstrap/js/bootstrap.min.js" rel="stylesheet" media="screen">
<link href="bootstrap/js/bootstrap-modal.js" rel="stylesheet" media="screen">
<link href="bootstrap/js/bootstrap-transition.js" rel="stylesheet" media="screen">
回答by Ben Dubuisson
You're loading your scripts wrong (some are loaded like stylesheets, some don't have the closing script tag).
您加载的脚本错误（有些像样式表一样加载，有些没有结束脚本标签）。
It should be :
它应该是 ：
<!--STYLESHEETS-->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="style.css">
<!--SCRIPTS - MAKE SURE THE PATH IS RIGHT FOR THE BOOTSTRAP SCRIPTS-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script
