Javascript Bootstrap | Open bootstrap modal with javascript and not with button

Question

How can we open bootstrap modal with javascript and not with button? I need to open without button, because another javascript program will decide when to open the modal.

JAVASCRIPT:

<script>
  //...
  document.getElementById("modalElement").style.visibility = ""; 
</script>

HTML:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div id="modalElement" class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Srii · Accepted Answer · 2023-04-14 14:09:52Z

7

This one works for Bootstrap 5

new bootstrap.Modal(document.querySelector("#exampleModalCenter")).show();

edited Apr 14, 2023 at 14:09

Srii

5994 gold badges8 silver badges26 bronze badges

answered Apr 11, 2023 at 5:59

user20958373

Sign up to request clarification or add additional context in comments.

Comments

Liad Yogev · Accepted Answer · 2020-05-30 11:25:06Z

6

Use .modal('show').

With jQuery it will be: $('#modalElement').modal('show')

Extracted from Bootstrap Modal API

answered May 30, 2020 at 11:25

Liad Yogev

8847 silver badges16 bronze badges

4 Comments

ret Over a year ago

Liad Yogev Over a year ago

@julian Seems alright as long as you have jQuery + Bootstrap loaded on your html page

ret Over a year ago

Button open the modal, but this code doesn´t open. Why?

ret Over a year ago

Now ok: <script> $(document).ready(function(){ $('#exampleModalCenter').modal('show'); }); </script> Thanks Liad Yogev!!

Phibinary · Accepted Answer · 2021-07-08 17:39:49Z

3

This is for Bootstrap 5 but should work in lower versions as well.

document.querySelector(".modal").classList.add("show");
document.querySelector(".modal").style.display = "block";

answered Jul 8, 2021 at 17:39

Phibinary

1111 silver badge2 bronze badges

1 Comment

FontFamily Over a year ago

While this answer works, it breaks the normal transitions that happen in a Bootstrap theme and requires additional unnecessary coding.

Hovercraft Full Of Eels · Accepted Answer · 2023-08-26 17:25:29Z

0

const modalElement = document.getElementById('yourmodalid');
if(modalElement){ 
    const modal = new bootstrap.Modal(modalElement); modal.show(); 
}

edited Aug 26, 2023 at 17:25

Hovercraft Full Of Eels

286k25 gold badges267 silver badges391 bronze badges

answered Aug 26, 2023 at 16:40

Nagendra Babu

1

1 Comment

Yunnosch Over a year ago

Welcome to Stack Overflow! While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. And maybe highlight the relevant additional original insight when compared to existing answers.

Javier Criado · Accepted Answer · 2023-11-17 23:33:29Z

0

answer using purely javascript

    var modalElement = new bootstrap.Modal(document.getElementById('modalElement'))

https://getbootstrap.com/docs/5.0/components/modal/#via-javascript

or if your calling it asynchronously

    const modalElement = bootstrap.Modal.getOrCreateInstance('#modalElement');
    modalElement.show();

https://getbootstrap.com/docs/5.0/components/modal/#getorcreateinstance

btw. you have two id attributes there. you must have only one id attribute in your element

edited Nov 17, 2023 at 23:33

answered Nov 17, 2023 at 23:16

Javier Criado

12 bronze badges

Collectives™ on Stack Overflow

Javascript Bootstrap | Open bootstrap modal with javascript and not with button

5 Answers 5

Comments

4 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related