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');
  }