沒有數據切換和數據目標屬性，模式將無法正常工作

Question

我正在使用bootstrap 4 js，我下面的鏈接打開一個模態：

<a id="show_login_modal" href="">Login</a>

然后是模態：

<div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
...
</div>

但是我想用默認的jQuery打開模態，所以我有下面的代碼：

 $('#show_login_modal').click(function(){
    $('#login_modal').modal('show');
})

$('#close_login_modal').click(function(){
    $('#login_modal').modal('hide');
})

問題是這樣的，當單擊登錄鏈接時，它看起來像一個淡入淡出，然后淡入淡出消失了，但是模態不打開。 你知道為什么嗎？

Answer 1

請檢查您是否沒有兩次包含jquery。 這也可能是由於這種情況。在某些情況下，插件也會產生問題。

確保按要求的順序放置庫以獲得結果：

1-首先bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js

（換句話說，必須在bootstrap.min.js之前調用jquery.min.js）

確保以上內容完好后，請嘗試以下代碼段。

   <a id="show_login_modal" href="javascript:void(0)">Login</a>

然后寫你的jQuery代碼。 發生的情況是，空的href不允許打開彈出窗口，只需執行javascript：void（0）后跟您的代碼即可。

Answer 2

我可以重現結果的唯一方法是保留href屬性並設置為href="" 。 刪除它或設置哈希值（ href="#" ）可以繞過此問題，這是我推薦的解決方案。

那，或者將該元素轉換為<button>以完全繞過超鏈接的默認行為。

 $('#button_modal, #link_modal').click(function(){ $('#login_modal').modal('show') }); 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> <button id="button_modal">Login</button> or <a id="link_modal">Login</a> <div id="login_modal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3>Modal header</h3> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <p>My modal content here…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

我還要指出的是，當您通過JavaScript激活模態時，不必依靠JavaScript也可以關閉模​​態。 無論如何初始化模態，烘焙到Modal結構中的data-dismiss屬性都將起作用。