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:

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

`shown.bs.modal` event occurs when HTML document contains at least `
` structure. — Chemical Programmer, Feb 21 '15 at 03:00
dublicate http://stackoverflow.com/questions/12190119/bootstrap-modal-show-event — gtzinos, Feb 27 '16 at 10:41
Greet comment @Chemical Programmer, it should appear with the answer — Tariq, Jan 21 '20 at 08:49

score 442 · Accepted Answer · edited Nov 02 '22 at 20:14

442

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".

edited Nov 02 '22 at 20:14

Top-Master

7,611
5
39
71

answered Jul 04 '13 at 04:06

Arun P Johny

384,651
66
527
531

22

Use `$("#code").on("shown.bs.modal", function(e) {})` for bootstrap 3.0. – teewuane Jan 23 '14 at 18:37
make sure to take into account what Chemical Programmer said about needing the
structure at least for this code to be called – whyoz May 13 '15 at 15:17
1

The `#code` refers to the jQuery selector, one of the basic ingredients for jQuery: https://www.w3schools.com/jquery/jquery_selectors.asp – DdW Feb 21 '17 at 14:46
2

I use `$(document).on("shown.bs.modal", ...` for overall listening – vladkras Jul 29 '17 at 07:38
3

@Xatenev `show` is at the beginning of the event, `shown` is at the end. This is consistent across Bootstrap 3 and 4 – cameronjonesweb Dec 21 '18 at 01:58
The Bootstrap 3.0 works for me, but I get the alert first and the modal afterwards. Not that it matters in my case. – Jonny Jan 23 '19 at 13:51
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 '19 at 09:24
@vladkras Thank you, that was exactly what I needed to do to overcome a set of restrictions that was tying my hands. You helped bring several days of suffering to an end just like that. Appreciated. – Az- Apr 07 '22 at 01:16

score 117 · Answer 2 · edited Dec 13 '19 at 22:38

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

edited Dec 13 '19 at 22:38

William Miller

9,839
3
25
46

answered Apr 28 '14 at 15:18

viper_tkd

1,179
1
7
2

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 – Krutal Modi May 02 '16 at 07: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 '17 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 '18 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 '18 at 14:56
Thanks for the correct event name, but, there is no need to replace the element ID for $(window). Using bs4 with jquery 3.4. – Jcc.Sanabria Feb 20 '20 at 14:44
1

with update to get specific modal in my bootstrap version was: `if (shownEvent.target.id == 'uploadTemplateModal'){ }` – Mahmoud Magdy Sep 27 '22 at 05:54

score 34 · Answer 3 · answered Nov 17 '16 at 11:52

34

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

answered Nov 17 '16 at 11:52

Atchyut Nagabhairava

1,295
3
16
23

score 11 · Answer 4 · answered Jul 04 '13 at 04:07

11

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

$('#my-modal').on('shown', function(){
  // code here
});

answered Jul 04 '13 at 04:07

Josnidhin

12,469
9
42
61

Replace `shown` with `shown.bs.modal` if using Bootstrap > 3 – David Kariuki Mar 17 '23 at 10:46

score 2 · Answer 5 · answered Jan 19 '23 at 10:52

2

This what worked with me to target specifec modal

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

answered Jan 19 '23 at 10:52

Mahmoud Magdy

662
10
13

score 0 · Answer 6 · answered Nov 12 '18 at 11:03

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

score 0 · Answer 7 · answered Jul 17 '23 at 10:57

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')

answered Jul 17 '23 at 10:57

Jakob

1,156
3
15
26

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 => {}) https://getbootstrap.com/docs/5.2/components/modal/ – WiseGuy Jul 26 '23 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 '23 at 08:34

Calling a function on Bootstrap modal open

7 Answers7

Update for Bootstrap 3 and 4

For Showing

For Hiding

With bootstrap 5

Linked

Related