Як сховати модаль Bootstrap за допомогою javascript?

Я читав публікації тут, на сайті 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мене є деякий код обробки помилок (суміш рубіну та 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>

Коли модаль відкритий у вікні браузера, спробуйте використовувати його консоль браузера

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

Якщо він працює (і модальний режим закривається), ви знаєте, що ваш закритий Javascript не надсилається з сервера до браузера правильно.

Якщо це не працює, то вам потрібно додатково дослідити клієнта, що відбувається. Наприклад, переконайтеся, що немає двох елементів з однаковим ідентифікатором. Наприклад, це працює вперше після завантаження сторінки, але не вдруге?

Консоль браузера: firebug для firefox, консоль налагодження для Chrome або Safari тощо.

щоб закрити модальний завантажувальний засіб, ви можете передати "приховати" як варіант модальному методу, як описано нижче

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

Ознайомтесь із робочою скрипкою тут

bootstrap також надає події, які ви можете підключити до модальної функціональності, наприклад, якщо ви хочете запустити подію, коли модал закінчено приховати від користувача, ви можете використовувати події hidden.bs.modal, ви можете прочитати більше про модальні методи та події тут у Документація

Якщо не працює вищевказаний метод, введіть ідентифікатор кнопки закриття та натисніть кнопку закриття.

Я використовую Bootstrap 3.4. Для мене це не працює

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

У відчаї я зробив це:

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

Можливо, це не елегантно, але це працює

Найкраща форма для того, щоб сховати та показати модал із завантажувальним це

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

Я відчував цю саму помилку, і цей рядок коду мені дуже допомагає.

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

$('#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

Я знайшов правильне рішення, яким ви можете скористатися цим кодом

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

Я наткнувся на те, що, на мою думку, було подібним питанням. $('#myModal').modal('hide');, Ймовірно , працює через цю функцію і потрапляє в лінію

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

Проблема полягає в тому, що значення isShown може бути невизначеним, навіть якщо відображається модальне значення, а значення має бути істинним. Я трохи змінив код завантажувальної програми на наступне

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

Це, здавалося, вирішило проблему здебільшого. Якщо тлі все ще залишається, ви завжди можете додати дзвінок, щоб вручну видалити його після прихованого дзвінка $('.modal-backdrop').remove();. Зовсім не ідеально, але працює.

(Посилаючись на Bootstrap 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

Мені пощастило здійснити дзвінок після того, як відбувся "показаний" зворотній дзвінок:

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

Це забезпечило завантаження модалу перед тим, як здійснити виклик hidash ().

Ми виявили, що між викликом коду нашого сервера та поверненням до зворотного дзвінка успіху було лише невелика затримка. Якщо ми завернули виклик на сервер у $("#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виклику він приховає модальний режим, а потім викликає код сторони сервера.

Я відчував ту саму проблему, і після трохи експериментів я знайшов рішення. У моєму обробці натискань мені потрібно було зупинити події, а не так:

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

Ось документ: http://getbootstrap.com/javascript/#modals-methods

Ось метод: $ ('# myModal'). Modal ('приховати')

Якщо вам потрібно кілька разів відкрити модал з різним вмістом, пропоную додати (у вас головний js):

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

Так ви очистите вміст для наступного відкриття і уникнете свого роду кешування

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

Навіть у мене такі ж проблеми. Це мені дуже допомогло

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

Я використав цей простий код:

$("#MyModal .close").click();

$('#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();

Нам потрібно подбати про бурхливість подій. Потрібно додати один рядок коду

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

Я усвідомлюю, що це старе питання, але я виявив, що жодне з них не було саме тим, що я шукав. Здається, це викликано спробою закрити модальний режим, перш ніж його закінчити.

Моє рішення ґрунтувалося на відповіді @ schoonie23, але мені довелося змінити кілька речей.

По-перше, я оголосив глобальну змінну у верхній частині мого сценарію:

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

Потім у моєму модальному коді:

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

Тоді це: (Зверніть увагу на назву "показано.bs.modal", що вказує на те, що модал показав повністю на відміну від "показати", яке спрацьовує, коли викликається подія шоу. (Я спочатку намагався просто "показано", але це не вийшло). )

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

Сподіваюсь, що це заощадить комусь додаткові дослідження якогось дня. Я витратив трохи на пошуки рішення, перш ніж придумати це.

Я використав цей код -

Сховати модаль з плавним ефектом за допомогою Fade Out.

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});

Якщо ви використовуєте клас закриття у своїх моделях, буде працювати наступне. Залежно від вашого випадку використання, я зазвичай рекомендую фільтрувати лише до видимого модалу, якщо є більше одного модалу із закритим класом.

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

document.getElementById ('closeButton'). click (); // додайте атрибут data-dismiss = "modal" до елемента в модалі та надайте йому цей ідентифікатор

Це погана практика, але ви можете використовувати цю техніку, щоб закрити модальний режим, натиснувши кнопку закриття в 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>

це можна зробити лише за допомогою HTML:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>