Bootstrap模態數據不起作用
[英]Bootstrap modal data dismiss not working
問題描述
因此， data-dismiss="modal"不適用於我的HTML中添加的按鈕，但適用於通過JS插入按鈕HTML添加到模態的按鈕。 這讓我覺得我添加腳本標簽的位置/順序有問題。
我的腳本標簽按此順序排列：
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/Shared/site.js"></script>
我試着把它們放在<head> 。 我把它們移到了</body>之前的最后一件事。 我把它們移到模態html之前和之后。
UPDATE
這是我的代碼的簡化版本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site-bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div id="Popup" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div id="PopupHeader">
<button type="button" id="PopupX" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 id="PopupTitle" class="modal-title floatLeft"></h4>
<div class="clear"></div>
</div>
<div class="modal-body bgColorWhite">
<div id="PopupContent">Test</div>
</div>
<div id="PopupButtons" class="modal-footer bgColorWhite">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/Shared/site.js"></script>
</body>
</html>
另一個說明：
如果我通過JS添加“關閉”按鈕，也就是X，它也可以。 它已經在模式中導致了問題。
有什么建議？
2 個解決方案
解決方案1
1 2014-11-14 04:35:00
我弄清楚了我的問題。 就是在我自己的JS文件中，我想添加到每個按鈕點擊事件，event.stopPropagation（）; 由於這是一個方法，並且我不希望每次調用它時多次添加到同一個按鈕，我會刪除之前的單擊事件，這將刪除Bootstrap的dismiss click事件。
所以，如果你有同樣的問題並且你已經正確添加了Bootstrap的所有JS，請檢查你自己的代碼以確保你沒有覆蓋/刪除事件。
UPDATE
只是為了澄清，event.stopPropagation（）可以防止數據解除工作。
解決方案2
0 2014-11-14 00:24:21
嘗試放入'模態內容'div：
<div class="modal-header">...</div>
<div class="modal-body">
...
your content
...
</div>
<div class="modal-footer">
...
your buttons
...
</div>
離子JavaScript數據刪除引導模態不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.