Data-Dismiss：如何在 function 中关闭引导模式

Question

I have a modal in which I need to validate some input using knockout validation. When I click the submit button, a function is called that validates the data. The following functionality is expected:

• If the validation fails, the modal stays open and the validation reason is displayed.
• If the validation succeeds, I want to close the modal.

How can I go about closing the modal inside my function?

Answer 1

What have you tried so far?

Per the Bootstrap documentation

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

Please read through the documentation!
http://getbootstrap.com/javascript/#modals

Answer 2

Make another button like this

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

This button contains data-dismiss="modal" .You can hide this button if you want.

Now You can use any other function in a customized way and when you want to hide the modal you can call

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

Answer 3

The above didn't work for me, modified slightly to add an id to the button and reference it that way. I just used the cancel button that was already on my modal form and added id="cancel-btn" to that one.

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

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

Answer 4

This will only hide modal

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

but other modal related stuff will not remove.

To completely remove modal from page and its 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');
  }