Calling a function on bootstrap modal open

Question

I used to use JQuery UI s dialog  and it had the open option  where you can specify some Javascript code to execute once the dialog is opened  I would have used that option to select the text within the dialog using a function I have   Now I want to do that using bootstrap s modal  Below is the HTMl code    lt div id  code  class  modal hide fade  gt       lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt           lt h3 gt Modal header lt  h3 gt       lt  div gt       lt div class  modal-body  gt           lt pre gt  print  Hello World                    And as for the button that opens the modal     lt a href   code  data-toggle  modal  class  btn code-dialog  gt Display code lt  a gt    I tried to use an onclick listener of the button  but the alert message was displayed before the modal appeared        code-dialog    click function        alert  I want this to appear after the modal has opened

User · Answer

You can use belw code for show and hide bootstrap model.

$('#my-model').on('shown.bs.modal', function (e) {
  // do something here...
})

and if you want to hide model then you can use below code.

$('#my-model').on('hidden.bs.modal', function() {
    // do something here...
});

I hope this answer is useful for your project.

User · Answer

Bootstrap modal exposes events  Listen for the the shown event like this      my-modal   on  shown   function         code here

User · Answer

if somebody still has a problem the only thing working perfectly for me by useing  loaded bs modal          editModal   on  loaded bs modal   function             console log  edit modal loaded                datepicker   datepicker               dateFormat   yy-mm-dd               clearBtn  true              rtl  false              todayHighlight  true              toggleActive  true              changeYear  true              changeMonth  true

User · Answer

will not work   use   window  instead  For Showing    window  on  shown bs modal   function              code   modal  show        alert  shown          For Hiding    window  on  hidden bs modal   function              code   modal  hide        alert  hidden

User · Answer

You can use the shown event show event based on what you need      quot  code quot    on  shown   function        alert  quot I want this to appear after the modal has opened  quot         Demo  Plunker Update for Bootstrap 3 0 For Bootstrap 3 0 you can still use the shown event but you would use it like this      code   on  shown bs modal   function  e         do something        See the Bootstrap 3 0 docs here under  quot Events quot

User · Answer

you can use show instead of shown for making the function to load just before modal open  instead of after modal open       code   on  show bs modal   function  e         do something

[javascript] Calling a function on bootstrap modal open

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui

Examples related to twitter-bootstrap

[javascript] Calling a function on bootstrap modal open

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui

Examples related to twitter-bootstrap

Examples related to modal-dialog