数据关闭：如何在函数内部关闭引导模式

Question

我有一个模式，我需要使用淘汰验证来验证一些输入。 当我单击提交按钮时，将调用一个函数来验证数据。预期具有以下功能：

• 如果验证失败，模式将保持打开状态并显示验证原因。
• 如果验证成功，我想关闭模式。

如何关闭函数内的模式？

Answer 1

到目前为止你尝试过什么？

根据 Bootstrap 文档

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

请仔细阅读文档！
http://getbootstrap.com/javascript/#modals

Answer 2

上面的内容对我来说不起作用，稍微修改一下以向按钮添加一个 id 并以这种方式引用它。我只是使用了模态表单中已有的取消按钮，并将 id="cancel-btn" 添加到该按钮中。

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

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

Answer 3

再制作一个这样的按钮

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

Answer 6

这是 BS5 的答案：

您可以像描述的那样初始化模态框这里

let myModal = new bootsrap.Modal('#myModalId', {})

现在您可以将其隐藏在一个简单的函数上。

myModal.hide()