Javascript Bootstrap $('#myModal').modal('show') 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36672304/
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 $('#myModal').modal('show') is not working
提问by Nysa
I'm not sure why but all the modal functions are not working with me. I checked the version and the load they are fine.
我不知道为什么，但所有的模态功能都不适用于我。我检查了版本和负载，它们很好。
I keep getting this error message:
我不断收到此错误消息：
Uncaught TypeError: $(...).modal is not a function
Uncaught TypeError: $(...).modal is not a function
for the hide I already found an alternative. instead of:
对于隐藏，我已经找到了替代方案。代替：
$('#myModal').modal('hide');
I used this :
我用过这个：
$('#myModal .close').click();
And it works perfectly.
它完美地工作。
The problem now is with the show
现在的问题是节目
$('#myModal').modal("show");
I also tried both
我也试过
$('#myModal').modal("toggle");
And:
和：
$('#myModal').modal();
but unfortunately none of them is working.
但不幸的是，他们都没有工作。
Here html code -when the button is clicked I will do some verification and handle a json data from the web service if it succeed then I want show my modal- everything is working except the show.
这里的 html 代码 - 单击按钮时，我将进行一些验证并处理来自 Web 服务的 json 数据，如果成功，那么我想显示我的模式 - 除了显示之外，一切都在工作。
<button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button>
if there's any alternative I would like to know it.
如果有任何替代方案，我想知道。
回答by Prakash Thete
Most common reason for such problems are
出现此类问题的最常见原因是
1.If you have defined the jquery library more than once.
1.如果你不止一次定义过jquery库。
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="modal fade" id="myModal" aria-hidden="true">
...
...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
The bootstrap library gets applied to the first jquery library but when you reload the jquery library, the original bootstrap load is lost(Modal function is in bootstrap).
bootstrap 库被应用到第一个 jquery 库，但是当你重新加载 jquery 库时，原始的 bootstrap 加载丢失（模态函数在 bootstrap 中）。
2.Please wrap your JavaScript code inside
2.请将您的 JavaScript 代码包装在里面
$(document).ready(function(){});
3.Please check if the id of the modal is same
3.请检查模态的id是否相同
as the one you have defined for the component(Also check for duplication's of same id ).
作为您为组件定义的那个（还要检查相同 id 的重复项）。
回答by Radhe Shyam sharma
<div class="modal fade" id="myModal" aria-hidden="true">
...
...
</div>
Note:Remove fade class from the div and enjoy it should be worked
注意：从 div 中删除淡入淡出类并享受它应该工作
回答by Mohammed Shareef C
This can happen for a few reasons:
这可能有以下几个原因：
- You forgot to include Jquery library in the document
- You included the Jquery library more than once in the document
- You forgot to include bootstrap.js library in the document
- The versions of your Javascript and Bootstrap does not match. Refer bootstrap documentation to make sure the versions are matching
- The modal
<div>is missing themodalclass - The id of the modal
<div>is incorrect. (eg: you wrongly prepended#in the id of the<div>) #sign is missing in the Jquery selector
- 您忘记在文档中包含 Jquery 库
- 您在文档中不止一次包含了 Jquery 库
- 您忘记在文档中包含 bootstrap.js 库
- 您的 Javascript 和 Bootstrap 的版本不匹配。请参阅引导程序文档以确保版本匹配
- 模态
<div>缺少modal类 - 模态的 id
<div>不正确。（例如：您错误地添加#了 的 id<div>） #Jquery 选择器中缺少符号
回答by Jai Prakash
the solution of 'bootstrap modal is not opening' is put your jquery CDN at first in the head tag (after head tag).
'bootstrap modal is not opening' 的解决方案是首先将你的 jquery CDN 放在 head 标签中（在 head 标签之后）。
I wasted two days in finding this problem.
我浪费了两天时间来发现这个问题。
回答by Muhammad Bilal
I got same issue while working with Modal Popup Bootstrap , I used Id and trigger click event for showing and hidding modal popup instead of $("#Id").modal('show') and $("#id").modal('hide'), `
我在使用 Modal Popup Bootstrap 时遇到了同样的问题，我使用 Id 并触发点击事件来显示和隐藏模态弹出窗口而不是 $("#Id").modal('show') 和 $("#id").modal ('隐藏'), `
<button type="button" id="btnPurchaseClose" class="close" data dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button>
<a class="btn btn-default" id="btnOpenPurchasePopup" data-toggle="modal" data target="#newPurchasePopup">Select</a>
$('#btnPurchaseClose').trigger('click');// for close popup
$('#btnOpenPurchase').trigger('click');`// for open popup
回答by Siddharth
My root cause was that I forgot to add the #before the id name. Lame but true.
我的根本原因是我忘记#在 id 名称之前添加。蹩脚但真实。
From
从
$('scheduleModal').modal('show');
To
到
$('#scheduleModal').modal('show');
For your reference, the code sequence that works for me is
供您参考，对我有用的代码序列是
<script>
function scheduleRequest() {
$('#scheduleModal').modal('show');
}
</script>
<script src="<c:url value="/resources/bootstrap/js/bootstrap.min.js"/>">
</script>
<script
src="<c:url value="/resources/plugins/fastclick/fastclick.min.js"/>">
</script>
<script
src="<c:url value="/resources/plugins/slimScroll/jquery.slimscroll.min.js"/>">
</script>
<script
src="<c:url value="/resources/plugins/datatables/jquery.dataTables.min.js"/>">
</script>
<script
src="<c:url value="/resources/plugins/datatables/dataTables.bootstrap.min.js"/>">
</script>
<script src="<c:url value="/resources/dist/js/demo.js"/>">
</script>
回答by Paul Vermeer
Use .modal({show:true})and .modal({show:false})instead of ('show')and ('hide')... it seems to be bootstrap / jquery version combination dependent. Hope it helps.
使用.modal({show:true})and.modal({show:false})而不是('show')and ('hide')... 它似乎依赖于 bootstrap / jquery 版本组合。希望能帮助到你。
回答by BR1COP
Please,
请，
try and check if the triggering button has attribute type="button". Working example:
尝试检查触发按钮是否具有属性 type="button"。工作示例：
<button type="button" id="trigger" style="visibility:visible;" onclick="modal_btn_click()">Trigger Modal Click</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script >
function modal_btn_click() {
$('#myModal').modal({ show: true });
}
</script>
回答by kumar
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
the first googleapis script is not working now a days use this second scripe given by jquery
第一个 googleapis 脚本现在不工作了，使用 jquery 给出的第二个脚本
回答by Sajal
jQuery lib has to be loaded first. In my case, i was loading bootstrap lib first, also tried tag with target and firing a click trigger. But the main issue was - jquery has to be loaded first.
必须先加载 jQuery 库。就我而言，我首先加载引导程序库，还尝试使用目标标记并触发点击触发器。但主要问题是 - 必须先加载 jquery。
