Data-Dismiss：如何在 function 中關閉引導模式

Question

我有一個模態，我需要在其中使用敲除驗證來驗證一些輸入。 當我單擊提交按鈕時，將調用 function 來驗證數據。 預期具有以下功能：

• 如果驗證失敗，模式將保持打開狀態並顯示驗證原因。
• 如果驗證成功，我想關閉模式。

我 go 如何關閉我的 function 中的模式？

Answer 1

你試過什么了？

根據Bootstrap文檔

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

請仔細閱讀文檔！
http://getbootstrap.com/javascript/#modals

Answer 2

像這樣制作另一個按鈕

<button type="button" class="btn btn-warning btn-lg shiny" data-dismiss="modal" aria-hidden="true">Cancel</button>

此按鈕包含data-dismiss =“modal”。如果需要，您可以隱藏此按鈕。

現在您可以以自定義方式使用任何其他功能，並且當您想隱藏可以調用的模態時

$(".btn-warning").click();

Answer 3

以上對我來說不起作用，稍微修改為按鈕添加一個id並以這種方式引用它。 我只是使用了我的模態表單上的取消按鈕，並將id =“cancel-btn”添加到該模式。

<button type="button" class="btn btn-ar btn-default" id="cancel-btn" data-dismiss="modal">  

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

Answer 4

這只會隱藏模態

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

但其他模態相關的東西不會刪除。

從頁面及其CSS中完全刪除模態

$('#modalId').modal('hide'); or $('#modalId').modal('toggle');
$('body').removeClass('modal-open');
$('body').css('padding-right', '0px');
$('.modal-backdrop').remove();

Answer 5

Here I'm giving a solution in plain javascript. I used Vue js and I don't want to use jQuery along with Vue.



document.querySelector('#modalid').classList.remove('show');
  document.querySelector('body').classList.remove('modal-open');
  const mdbackdrop = document.querySelector('.modal-backdrop');
  if (mdbackdrop){
    mdbackdrop.classList.remove('modal-backdrop', 'show');
  }