Launch Bootstrap Modal on page load

Question

I don t know javascript at all  The bootstrap documentation says to      Call the modal via javascript      myModal   modal options    I have no clue how to call this on a page load  Using the supplied code on the bootstrap page I can successfully call the Modal on an element click  but I want it to load immediately on a page load

User · Answer

I recently needed to launch a Bootstrap 5 modal without jQuery and not with a button click (eg, on page load) using Django messages. This is how I did it:

Template/HTML

<div class="modal" id="notification">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Notification!</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {% for m in messages %}
          {{ m }}
        {% endfor %}
      </div>
      <div class="modal-footer justify-content-between">
        <a class="float-none btn btn-secondary" href="{% url 'some_view' %}"
           type="button">
          Link/Button A
        </a>
        <button type="button" class="btn btn-primary"
                data-bs-dismiss="modal">
          Link/Button B
        </button>
      </div>
    </div>
  </div>
</div>

JS in a file or in the template

{% block javascript %}
  {{ block.super }}
  <script>
    var test_modal = new bootstrap.Modal(
      document.getElementById('notification')
    )
    test_modal.show()
  </script>
{% endblock javascript %}

This method will work without the Django template; just use the HTML and put the JS in a file or script elements that loads after the Bootstrap JS before the end of the body element.

User · Answer

regarding what Andre s Ilich say you have to add the js script after the line in what you call the jquery    lt script src  content bootstrapJS jquery-2 1 1 min js  type  text javascript  gt  lt  script gt    lt script type  text javascript  gt         window  load function                 myModal   modal  show               lt  script gt    in my case that was the problem hope it helps

User · Answer

Tested with Bootstrap 3 and jQuery  2 2 and 2 3     window  on  load  function          myModal   modal  show            lt  -- Modal -- gt   lt div class  modal fade  id  myModal  role  dialog  gt       lt div class  modal-dialog  gt          lt  -- Modal content-- gt         lt div class  modal-content  gt           lt div class  modal-header  gt             lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt             lt h4 class  modal-title  gt  lt i class  fa fa-exclamation-circle  gt  lt  i gt  amp nbsp    Your modal Title lt  h4 gt           lt  div gt           lt div class  modal-body  gt              Your modal Content          lt  div gt           lt div class  modal-footer  gt             lt button type  button  class  btn btn-default  data-dismiss  modal  gt Fechar lt  button gt           lt  div gt         lt  div gt        lt  div gt   lt  div gt    https   jsfiddle net d7utnsbm

User · Answer

In bootstrap 3 you just need to initialise the modal through js and if in the moment of the page load the modal markup is in the page the modal will show up   In case you want to prevent this  use the option show  false where you initialise the modal  Something like this      modal   modal   show  false

User · Answer

You may want to keep jquery js deferred for faster page load  However  if jquery js is deferred the   window  load may not work  Then you may try  setTimeout function       myModal   modal  show     3000    it will popup your modal after page is completely loaded  including jquery

User · Answer

Just add the following-  class  modal show    Working Example-   x000D   x000D   lt link rel  stylesheet  href  http   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 0 jquery min js  gt  lt  script gt  x000D   lt script src  http   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt div class  container  gt  x000D     lt  -- Trigger the modal with a button -- gt  x000D     lt button type  button  class  btn btn-info btn-lg  data-toggle  modal  data-target   myModal  gt Open Modal lt  button gt  x000D   x000D     lt  -- Modal -- gt  x000D     lt div class  modal show  id  myModal  role  dialog  gt  x000D       lt div class  modal-dialog  gt  x000D       x000D         lt  -- Modal content-- gt  x000D         lt div class  modal-content  gt  x000D           lt div class  modal-header  gt  x000D             lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt  x000D             lt h4 class  modal-title  gt Modal Header lt  h4 gt  x000D           lt  div gt  x000D           lt div class  modal-body  gt  x000D             lt p gt Some text in the modal  lt  p gt  x000D           lt  div gt  x000D           lt div class  modal-footer  gt  x000D             lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt  x000D           lt  div gt  x000D         lt  div gt  x000D         x000D       lt  div gt  x000D     lt  div gt  x000D     x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Like others have mentioned  create your modal with display block   lt div class  modal in  tabindex  -1  role  dialog  style  display block  gt        Place the backdrop anywhere on your page  it does not necesarily need to be at the bottom of the page   lt div class  modal-backdrop fade show  gt  lt  div gt     Then  to be able to close the dialog again  add this   lt script gt         button data-dismiss modal    click function                  modal in   removeClass  in   addClass  fade   hide                modal-backdrop   remove             lt  script gt    Hope this helps

User · Answer

Heres a solution  without javascript initialization    I couldn t find an example without initializing your modal with javascript      myModal   modal  show    so heres a suggestion on how you could implement it without javascript delay on page load    Edit your modal container div with class and style      lt div class  modal in  id  MyModal  tabindex  -1  role  dialog  style  display  block  padding-right  17px   gt    Edit your body with class and style    lt body class  modal-open  style  padding-right 17px   gt  Add modal-backdrop div   lt div class  modal-backdrop in  gt  lt  div gt  Add script    document  ready function            body   css  padding-right    0px           body   removeClass  modal-open            modal-backdrop   remove             MyModal   modal  show          What will happen is that the html for your modal will be loaded on page load without any javascript   no delay   At this point you can t close the modal  so that is why we have the document ready script  to load the modal properly when everything is loaded  We will actually remove the custom code and then initialize the modal   again   with the  modal  show

User · Answer

In order to avoid bootstrap being overruled and loosing it  s funcionality  simply create a regular launch button  provide it with an Id  and  click it  using jquery  like so  The launch button    lt button type  button  id  btnAnouncement  class  btn btn-primary  data-toggle  modal  data-target   modalAnouncement  gt    See what  s new   lt  button gt    The jQuery trigger     document  ready function            btnAnouncement   click         Hope it helps  Cheers

User · Answer

You don t need javascript to show modal  The simplest way is replace  hide  by  in   class  modal fade hide    so  class  modal fade in    and you need add onclick        modal   hide    on button close   PS  I think the best way is add jQuery script       modal   modal  show

User · Answer

You can activate the modal without writing any JavaScript simply via data attributes   The option  show  set to true shows the modal when initialized    lt div class  modal fade  tabindex  -1  role  dialog  data-show  true  gt  lt  div gt

User · Answer

lt div id  ModalStart  class  modal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt       lt div class  modal-body  gt             lt p gt  lt i class  icon-spinner icon-spin icon-4x  gt  lt  i gt  lt  p gt       lt  div gt   lt  div gt    You can show it on start even without Javascript  Just delete the class  hide    class  Modal

User · Answer

You can try this runnable code-   x000D   x000D    window  load function   x000D    x000D          myModal   modal  show    x000D      x000D   lt link rel  stylesheet  href  http   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 0 jquery min js  gt  lt  script gt  x000D   lt script src  http   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt div class  container  gt  x000D     lt  -- Trigger the modal with a button -- gt  x000D     lt button type  button  class  btn btn-info btn-lg  data-toggle  modal  data-target   myModal  gt Open Modal lt  button gt  x000D   x000D     lt  -- Modal -- gt  x000D     lt div class  modal fade  id  myModal  role  dialog  gt  x000D       lt div class  modal-dialog  gt  x000D       x000D         lt  -- Modal content-- gt  x000D         lt div class  modal-content  gt  x000D           lt div class  modal-header  gt  x000D             lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt  x000D             lt h4 class  modal-title  gt Modal Header lt  h4 gt  x000D           lt  div gt  x000D           lt div class  modal-body  gt  x000D             lt p gt Some text in the modal  lt  p gt  x000D           lt  div gt  x000D           lt div class  modal-footer  gt  x000D             lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt  x000D           lt  div gt  x000D         lt  div gt  x000D         x000D       lt  div gt  x000D     lt  div gt  x000D     x000D   lt  div gt  x000D   x000D   x000D    More can be found here   Think u have your complete answer

User · Answer

Update 2020 - Bootstrap 5 Building on the excellent responses from previous answers  in Bootstrap 5 with no jQuery  this has worked  document querySelector   data-target  quot  exampleModal quot     click     Full snippet   x000D   x000D  window onload        gt      document querySelector   data-target   exampleModal     click      x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 5 0 0-alpha1 js bootstrap min js  gt  lt  script gt   lt script src  https   cdn jsdelivr net npm popper js 1 16 0 dist umd popper min js  gt  lt  script gt   lt link href  https   stackpath bootstrapcdn com bootstrap 5 0 0-alpha1 css bootstrap min css  rel  stylesheet    gt     lt div class  container py-3  gt      lt  -- Button trigger modal -- gt     lt button type  button  class  btn btn-primary  data-toggle  modal  data-target   exampleModal  gt      Launch demo modal    lt  button gt      lt  -- Modal -- gt     lt div class  modal fade  id  exampleModal  tabindex  -1  aria-labelledby  exampleModalLabel  aria-hidden  true  gt       lt div class  modal-dialog  gt         lt div class  modal-content  gt           lt div class  modal-header  gt             lt h5 class  modal-title  id  exampleModalLabel  gt Modal title lt  h5 gt             lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt               lt span aria-hidden  true  gt  amp times  lt  span gt             lt  button gt           lt  div gt           lt div class  modal-body  gt                         lt  div gt           lt div class  modal-footer  gt             lt button type  button  class  btn btn-secondary  data-dismiss  modal  gt Close lt  button gt             lt button type  button  class  btn btn-primary  gt Save changes lt  button gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt    lt  div gt  x000D   x000D   x000D

User · Answer

In my case adding jQuery to display the modal didn t work     document  ready function             myModal   modal  show          Which seemed to be because the modal had attribute aria-hidden  true     lt div class  modal fade  aria-hidden  true  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  gt    Removing that attribute was needed as well as the jQuery above    lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  gt    Note that I tried changing the modal classes from modal fade to modal fade in  and that didn t work  Also  changing the classes from modal fade to modal show stopped the modal from being able to be closed

User · Answer

Just wrap the modal you want to call on page load inside a jQuery load event on the head section of your document and it should popup  like so  JS  lt script type  quot text javascript quot  gt        window  on  load   function                 myModal   modal  show             lt  script gt   HTML  lt div class  quot modal hide fade quot  id  quot myModal quot  gt       lt div class  quot modal-header quot  gt           lt a class  quot close quot  data-dismiss  quot modal quot  gt    lt  a gt           lt h3 gt Modal header lt  h3 gt       lt  div gt       lt div class  quot modal-body quot  gt           lt p gt One fine body    lt  p gt       lt  div gt       lt div class  quot modal-footer quot  gt           lt a href  quot   quot  class  quot btn quot  gt Close lt  a gt           lt a href  quot   quot  class  quot btn btn-primary quot  gt Save changes lt  a gt       lt  div gt   lt  div gt   You can still call the modal within your page with by calling it with a link like so   lt a class  quot btn quot  data-toggle  quot modal quot  href  quot  myModal quot  gt Launch Modal lt  a gt

User · Answer

In addition to user2545728 and Reft answers  without javascript but with the modal-backdrop in  3 things to add   a div with the classes modal-backdrop in before the  modal class style  display block   to the  modal class fade in together with the  modal class   Example   lt div class  modal-backdrop in  gt  lt  div gt    lt div class  modal fade in  tabindex  -1  role  dialog  aria-labelledby  channelModal  style  display block   gt        lt div class  modal-dialog modal-lg  role  document  gt            lt div class  modal-content  gt                lt div class  modal-header  gt                    lt h4 class  modal-title  id  channelModal  gt Welcome  lt  h4 gt                lt  div gt                lt div class  modal-body  style  height 350px   gt                   How did you find us                lt  div gt            lt  div gt        lt  div gt    lt  div gt

User · Answer

Update 2020 - Bootstrap 4  The modal markup has changed slightly for Bootstrap 4  Here s how you can open the modal on page load  and optionally delay display of the modal       window  on  load  function        var delayMs   1500     delay in milliseconds      setTimeout function                myModal   modal  show           delayMs             lt div class  modal fade  id  myModal  gt         lt div class  modal-dialog modal-lg modal-dialog-centered  role  document  gt               lt div class  modal-content  gt                   lt div class  modal-header  gt                       lt h4 class  modal-title  gt My Modal lt  h4 gt                       lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt                           lt span aria-hidden  true  gt    lt  span gt                       lt  button gt                   lt  div gt                   lt div class  modal-body  gt                                           lt  div gt                   lt div class  modal-footer  gt                       lt button type  button  class  btn btn-secondary mx-auto  data-dismiss  modal  gt Close lt  button gt                   lt  div gt               lt  div gt         lt  div gt   lt  div gt    Demo on Codeply

[javascript] Launch Bootstrap Modal on page load

Examples related to javascript

Examples related to html

Examples related to twitter-bootstrap