Question 66417 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to hide bootstrap modal in show.bs.modal event? – Javascript

Here is a code example:

let order_modal = document.getElementById('order');

order_modal.addEventListener('show.bs.modal', function (e) {
    bootstrap.Modal.getInstance(order_modal).hide();
}, false);

When I open the modal, it opens, the .hide() method does not work.

If I change event to ‘shown.bs.modal’ it works but modal blinks.

Tags:

2

Answers


  1. 0

    You could use Event.preventDefault() to prevent the show.bs.modal event from being executed :

    const modal = document.getElementById("modal");
        
modal.addEventListener("show.bs.modal", function(e){
  e.preventDefault();
});
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"     crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<button type="button" data-bs-toggle="modal" data-bs-target="#modal">
  Launch modal
</button>
  
<div class="modal fade" id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button data-bs-dismiss="modal">
          Close Modal
        </button>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    I am using an event-click button to close :))) I think it is not the best solution but it worked for me.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search