245

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:

<div id="code" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <pre>
print 'Hello World'

And as for the button that opens the modal:

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

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!");
});
3

7 Answers 7

448

You can use the shown event/show event based on what you need:

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

Demo: Plunker

Update for Bootstrap 3 and 4

For Bootstrap 3.0 and 4.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 "Events".

8
  • 22
    Use $("#code").on("shown.bs.modal", function(e) {}) for bootstrap 3.0.
    – teewuane
    Jan 23, 2014 at 18:37
  • 1
    The #code refers to the jQuery selector, one of the basic ingredients for jQuery: w3schools.com/jquery/jquery_selectors.asp
    – DdW
    Feb 21, 2017 at 14:46
  • 2
    I use $(document).on("shown.bs.modal", ... for overall listening
    – vladkras
    Jul 29, 2017 at 7:38
  • 4
    @Xatenev show is at the beginning of the event, shown is at the end. This is consistent across Bootstrap 3 and 4 Dec 21, 2018 at 1:58
  • 1
    At least the shown.bs.modal actually executes before the modal is shown. This is not a problem in my case, but may be good to know.
    – Jonny
    Jan 31, 2019 at 9:24
117

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');
});
6
  • 8
    $( "#modal" ).on('shown', function(){ alert("I want this to appear after the modal has opened!");} Was not working for me but $(window) worked !! Thanks @viper_tkd May 2, 2016 at 7:06
  • 1
    I needed to bind to ANY modal that opened/closed, and not by a specific selector. This answer worked well for me in that case.
    – jyoseph
    May 17, 2017 at 17:18
  • This works before modal is fully loaded on GUI. I want to take data from my modal after modal is loaded - this method returns 'undefined' for everything because modal GUI is not yet existing, so fields and everything else is not queryable yet. (not visible)
    – FrenkyB
    Jan 24, 2018 at 15:01
  • 1
    This worked for me, but I added a check within the handler to target one specific modal: if( $('#code').is( e.relatedTarget ) ) { ... } since I had multiple on the page.
    – allicarn
    Oct 18, 2018 at 14:56
  • 1
    with update to get specific modal in my bootstrap version was: if (shownEvent.target.id == 'uploadTemplateModal'){ } Sep 27, 2022 at 5:54
35

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...
})
11

Bootstrap modal exposes events. Listen for the the shown event like this

$('#my-modal').on('shown', function(){
  // code here
});
1
  • Replace shown with shown.bs.modal if using Bootstrap > 3 Mar 17 at 10:46
4

This what worked with me to target specifec modal

$('#code').on('shown.bs.modal', function(){
  // code here
  alert('shown13');
});
0

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
        });
});
0

With bootstrap 5

You can open the modal programmatically and simply call your method afterwards, so:

const modal = new bootstrap.Modal('#myModal')
modal.show()
alert('modal is showing')
2
  • 1
    Here you manually trigger the modal and fire off another manual alert. The original question wanted an event when the modal was shown programmatically. Bootstrap 5 would require binding with the shown event for the modal. myModalEl.addEventListener('shown.bs.modal', event => {}) getbootstrap.com/docs/5.2/components/modal
    – WiseGuy
    Jul 26 at 17:31
  • @WiseGuy Thanks for the response. You're right, but at least for my case the effect was the same, so I'm leaving it, as it might help others as well.
    – Jakob
    Jul 27 at 8:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.