How can I trigger a Bootstrap modal programmatically

Question

If I go here  http   getbootstrap com 2 3 2 javascript html modals  And click  Launch demo modal  it does the expected thing   I m using the modal as part of my signup process and there is server side validation involved   If there are problems I want to redirect the user to the same modal with my validation messages displayed   At the moment I can t figure out how to get the modal to display other than a physical click from the user   How can I launch the model programmatically

User · Answer

The following code useful to open modal on openModal() function and close on closeModal() :

      function openModal() {
          $(document).ready(function(){
             $("#myModal").modal();
          });
      }

     function closeModal () {
          $(document).ready(function(){
             $("#myModal").modal('hide');
          });  
      }

/* #myModal is the id of modal popup */

User · Answer

In order to manually show the modal pop up you have to do this      myModal   modal  show      You previously need to initialize it with show  false so it won t show until you manually do it       myModal   modal   show  false     Where myModal is the id of the modal container

User · Answer

You should t write data-toggle  modal  in the element which triggered the modal  like a button   and you  manually can show the modal with       myModal   modal  show      and hide with       myModal   modal  hide

User · Answer

HTML   lt  -- Button trigger modal -- gt   lt button type  button  class  btn btn-primary btn-lg  gt    Launch demo modal  lt  button gt    lt  -- Modal -- gt   lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt     lt div class  modal-dialog  gt       lt div class  modal-content  gt         lt div class  modal-header  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 h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 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-default  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    JS     button   click function        myModal   modal  show          DEMO JSFIDDLE

User · Answer

If you are looking for a programmatical modal creation  you might love this   http   nakupanda github io bootstrap3-dialog   Even though Bootstrap s modal provides a javascript way for modal creation  you still need to write modal s html markups first

User · Answer

I wanted to do this the angular  2 4  way  here is what I did    lt div  class show   visible   class in   visible  class  modal fade  id  confirm-dialog-modal  role  dialog  gt      lt  div gt     Important things to note    visible is a variable  boolean  in the component which governs modal s visibility  show and in are bootstrap classes    An example component  amp  html  Component   ViewChild  rsvpModal     static  false    rsvpModal  ElementRef      HostListener  document keydown escape      event      onEscapeKey event  KeyboardEvent        this hideRsvpModal             hideRsvpModal event   Event        if   event     event target as Element  classList contains  modal            this renderer setStyle this rsvpModal nativeElement   display    none          this renderer removeClass this rsvpModal nativeElement   show          this renderer addClass document body   modal-open                showRsvpModal         this renderer setStyle this rsvpModal nativeElement   display    block        this renderer addClass this rsvpModal nativeElement   show        this renderer removeClass document body   modal-open          Html   lt  --S RSVP-- gt   lt div class  modal fade   rsvpModal role  dialog  aria-labelledby  niviteRsvpModalTitle   click   hideRsvpModal  event   gt       lt div class  modal-dialog modal-dialog-centered modal-dialog-scrollable  role  document  gt           lt div class  modal-content  gt               lt div class  modal-header  gt                   lt h5 class  modal-title  id  niviteRsvpModalTitle  gt                    lt  h5 gt                   lt button type  button  class  close   click   hideRsvpModal    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 bg-white text-dark                       click   hideRsvpModal    gt Close lt  button gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt   lt  --E RSVP-- gt

User · Answer

The same thing happened to me  I wanted to open the Bootstrap modal by clicking on the table rows and get more details about each row  I used a trick to do this  Which I call the virtual button  Compatible with the latest version of Bootstrap  v5 0 0-alpha2   It might be useful for others as well  See this code snippet with preview  https   gist github com alireza-rezaee c60da1429c36351ef4f071dec0ea9aba Summary  let exampleButton   document createElement  quot button quot    exampleButton classList add  quot d-none quot    document body appendChild exampleButton   exampleButton dataset toggle    quot modal quot   exampleButton dataset target    quot  exampleModal quot      AddEventListener to all rows document querySelectorAll   exampleTable tr   forEach row   gt        row addEventListener  click   e   gt              Set parameteres  clone row dataset          exampleButton dataset whatever   e target closest  tr   dataset whatever            Button click simulation           Now we can use relatedTarget         exampleButton click                All this is to use the relatedTarget property   See Bootstrap docs

User · Answer

you can show the model via jquery  javascript       yourModalID   modal     show  true      Demo  here  or you can just remove the class  hide    lt div class  modal  id  yourModalID  gt      modal content  lt  div gt

[javascript] How can I trigger a Bootstrap modal programmatically?

Examples related to javascript

Examples related to twitter-bootstrap