如何從JavaScript中隱藏Bootstrap模態？

Question

我已閱讀這裏的帖子，Bootstrap網站，並像谷歌一樣Google搜索 - 但找不到我確信是一個簡單的答案...

我有一個Bootstrap模式，的link_to助手這樣的：

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %> 

在我ContactsController.create行動，我有一個創建Contact代碼，然後假冒到create.js.erb。在create.js.erb中，我有一些錯誤處理代碼（混合了ruby和javascript）。如果一切順利，我想關閉模態。

這是我遇到麻煩的地方。一切順利時，我似乎無法解除模態。我試過$('#myModal').modal('hide');，這個沒有效果。我也試過$('#myModal').hide();這會導致模式被解僱但離開背景。

關於如何在create.js.erb之內關閉模式和/或關閉背景的任何指導？

編輯

下面是myModal標記：

<div class="modal hide" id="myModal" > 
    <div class="modal-header"> 
    <a class="close" data-dismiss="modal">×</a> 
    <h3>Add Contact</h3> 
    <div id="errors_notification"> 
    </div> 
    </div> 
    <div class="modal-body"> 
    <%= form_for :contact, url: contacts_path, remote: true do |f| %> 
     <%= f.text_field :first_name, placeholder: "first name" %> 
     <%= f.text_field :last_name, placeholder: "last name" %> 
     <br> 
     <%= f.submit "Save", name: 'save', class: "btn btn-primary" %> 
     <a class="close btn" data-dismiss="modal">Cancel</a> 
    <% end %> 
    </div> 
    <div class="modal-footer"> 
    </div> 
</div> 

Answer 1

隨着模態在瀏覽器窗口中打開，使用瀏覽器的控制檯來嘗試

$('#myModal').modal('hide'); 

如果它的工作原理（和模式關閉），那麼你知道你的關閉Javascript是而不是正在發送fr正確地將服務器連接到瀏覽器。

如果不起作用，那麼您需要進一步調查客戶端正在發生的事情。例如，確保沒有兩個具有相同ID的元素。例如它是在頁面加載後第一次運行，但不是第二次運行？

瀏覽器的控制檯：Firefox的Firebug，對於Chrome或Safari的調試控制檯等

Answer 2

我遇到了什麼，我相信是一個類似的問題。該$('#myModal').modal('hide');很可能通過該功能運行和打線

if (!this.isShown || e.isDefaultPrevented()) return 

的問題是，即使顯示模態值被示不定，價值應該是真實的。我已經將自舉代碼稍微修改爲以下內容

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return 

這似乎可以解決大部分問題。如果背景仍然存在，您可以在隱藏電話$('.modal-backdrop').remove();後添加通話以手動刪除它。根本不理想，但確實有效。

Answer 3

我遇到了同樣的問題，經過一番實驗後，我發現了一個解決方案。在我的點擊處理程序中，我需要冒泡停止的情況下，像這樣：

$("a.close").on("click", function(e){ 
    $("#modal").modal("hide"); 
    e.stopPropagation(); 
}); 

Answer 4

（參見自舉3），要隱藏模式的使用：$('#modal').modal('hide')。但是背景的原因（對我而言）是因爲在'隱藏'完成之前我正在銷燬模態的DOM。

爲了解決這個問題，我用DOM去除了隱藏的事件。在我的情況：this.render()

var $modal = $('#modal'); 

//when hidden 
$modal.on('hidden.bs.modal', function(e) { 
    return this.render(); //DOM destroyer 
}); 

$modal.modal('hide'); //start hiding 

Answer 5

關閉引導modal你可以通過'隱藏'作爲選項模態方法如下

$('#modal').modal('hide'); 

請看一看工作fiddle here

bootstrap還提供了可以掛鉤到modal功能的事件，例如，如果您想要激發ae泄時態已經完成了從您可以使用hidden.bs.modal事件的用戶被隱藏，你可以在Documentation

閱讀更多關於模式的方法和事件在這裏如果上述方法工作的非，給ID到你的關閉按鈕，並觸發點擊關閉按鈕。

Answer 6

我有更好的運氣打出電話之後發生的「顯示」回調：

$('#myModal').on('shown', function() { 
     $('#myModal').modal('hide'); 
}) 

這保證了模態做皮（）調用製作前加載。

Answer 7

我遇到了同樣的錯誤，這行代碼真的幫助我。

$("[data-dismiss=modal]").trigger({ type: "click" }); 

Answer 8

我用引導3.4 對於我來說，這並不工作

$('#myModal').modal('hide')

無奈之下，我這樣做：

$('#myModal').hide(); 
$('.modal-backdrop').hide(); 

也許這不是優雅，但它的工作原理

Answer 9

我們需要照顧事件bubbli NG。需要添加的代碼

$("#savechanges").on("click", function (e) { 
     $("#userModal").modal("hide"); 
     e.stopPropagation(); //This line would take care of it 
    }); 

Answer 10

下面一行是DOC： http://getbootstrap.com/javascript/#modals-methods

這裏是方法： $（ '＃myModal'）。模式（「隱藏」）

如果需要開幾次不同內容的模態，我建議增加（在你主JS）：

$('body').on('hidden.bs.modal', '.modal', function() { 
     $(this).removeData('bs.modal'); 
    }); 

所以，你會清理下一個內容開，避免了類型的緩存

Answer 11

我發現你可以使用此代碼

$('.close').click(); 

Answer 12

正確的解決方案我意識到這是一個老問題，但我發現，這些都不是真正的我是什麼升確切地說，這似乎是由於在完成顯示之前嘗試關閉模態而引起的。

我的解決方案是基於@ schoonie23的答案，但我不得不改變一些東西。

首先，我聲明我的腳本的頂部，一個全局變量：

<script> 
    var closeModal = false; 
    ...Other Code... 

然後在我的模式代碼：

$('#myModal').on('show.bs.modal', function (event) { 
    ...Some Code... 
    if (someReasonToHideModal) { 
     closeModal = true; 
     return; 
    } 
    ...Other Code... 

然後這樣的：（註名「shown.bs。模式「，表示模式已經完全顯示，而不是show（show），當顯示事件被調用時觸發（我原本試過'顯示'但它不起作用。）

$('#myModal').on('shown.bs.modal', function (event) { 
    if (closeEditModal) { 
     $('#myModal').modal('hide'); 
     closeModal = false; 
    } 
}); 

希望這可以節省某人額外的研究有一天。在提出這個問題之前，我花了一點時間尋找解決方案。

Answer 13

$('.modal-backdrop').hide(); // for black background 
$('body').removeClass('modal-open'); // For scroll run 
$('#modal').modal('hide'); 

Answer 14

隱藏和顯示一個模式與引導它的

//OPEND 
$('#ModalForm').modal('show'); 
//HIDE 
$('#ModalForm').modal('hide'); 

Answer 15

我們發現的是，有呼叫到我們的服務器代碼和返回成功之間只是有輕微的延遲的最佳形式回電話。如果我們將呼叫打包到$("#myModal").on('hidden.bs.modal', function (e)處理程序中的服務器，然後調用$("#myModal").modal("hide");方法，則瀏覽器將隱藏模式，然後調用服務器端代碼。

再次，不優雅，但功能。

function myFunc(){ 
     $("#myModal").on('hidden.bs.modal', function (e) { 
      // Invoke your server side code here. 
     }); 
     $("#myModal").modal("hide"); 
}; 

正如你可以看到，當調用myFunc，它會隱藏模式，然後調用服務器端代碼。

Answer 16

這是壞習慣，但您可以使用此技術通過在javascript中調用關閉按鈕來關閉模式。 這將在3秒後關閉模式。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Bootstrap Example</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<script> 
window.onload=function() 
{ 
setInterval(function(){ 

$("#closemodal").click(); 
}, 3000); 

} 
</script> 
</head> 
<body> 

    <div class="container"> 
<h2>Modal Example</h2> 
<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
     <p>Some text in the modal.</p> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button> 
    </div> 
    </div> 

</div> 
</div> 

</div> 

</body> 
</html> 

Answer 17

即使我有同樣的問題。這對我幫助很大

$("[data-dismiss=modal]").trigger({ type: "click" }); 

Answer 18

$('#modal').modal('hide'); 
//hide the modal 

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed 

$('.modal-backdrop').remove(); 
//need to remove div with modal-backdrop class 

Answer 19

$('#modal').modal('hide');，除非我有data-dismiss="modal"上的取消按鈕的屬性，它的變種並沒有爲我工作。和你一樣，我的需求是根據一些額外的邏輯可能關閉/可能不關閉，因此點擊與data-dismiss="modal"完全不同的鏈接是不行的。我最後不得不與data-dismiss="modal"一個隱藏按鈕，我可以編程方式調用從單擊處理程序，所以

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a> 
<a class="close btn">Cancel</a> 

，然後點擊處理內部，當你需要關閉模式取消，你可以有

$('#hidden-cancel').click();