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 <div class="modal fade"><div class="modal-dialog"></div></div> structure. — Chemical Programmer
– Chemical Programmer, Commented Feb 21, 2015 at 3:00
dublicate stackoverflow.com/questions/12190119/bootstrap-modal-show-event — gtzinos
– gtzinos, Commented Feb 27, 2016 at 10:41
Greet comment @Chemical Programmer, it should appear with the answer — Tariq
– Tariq, Commented Jan 21, 2020 at 8:49

Top-Master · Accepted Answer · 2022-11-02 20:14:37Z

460

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 2, 2022 at 20:14

Top-Master

9,0396 gold badges52 silver badges97 bronze badges

answered Jul 4, 2013 at 4:06

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

teewuane Over a year ago

Use $("#code").on("shown.bs.modal", function(e) {}) for bootstrap 3.0.

DdW Over a year ago

The #code refers to the jQuery selector, one of the basic ingredients for jQuery: w3schools.com/jquery/jquery_selectors.asp

vladkras Over a year ago

I use $(document).on("shown.bs.modal", ... for overall listening

cameronjonesweb Over a year ago

@Xatenev show is at the beginning of the event, shown is at the end. This is consistent across Bootstrap 3 and 4

Jonny Over a year ago

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.

|

William Miller · Accepted Answer · 2019-12-13 22:38:00Z

121

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, 2019 at 22:38

William Miller

10.4k4 gold badges31 silver badges50 bronze badges

answered Apr 28, 2014 at 15:18

viper_tkd

1,2191 gold badge8 silver badges2 bronze badges

6 Comments

Krutal Modi Over a year ago

$( "#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

jyoseph Over a year ago

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.

FrenkyB Over a year ago

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)

allicarn Over a year ago

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.

Mahmoud Magdy Over a year ago

with update to get specific modal in my bootstrap version was: if (shownEvent.target.id == 'uploadTemplateModal'){ }

|

Atchyut Nagabhairava · Accepted Answer · 2016-11-17 11:52:52Z

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

Josnidhin · Accepted Answer · 2013-07-04 04:07:55Z

11

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

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

answered Jul 4, 2013 at 4:07

Josnidhin

12.5k9 gold badges45 silver badges62 bronze badges

1 Comment

David Kariuki Over a year ago

Replace shown with shown.bs.modal if using Bootstrap > 3

Mahmoud Magdy · Accepted Answer · 2023-01-19 10:52:10Z

This what worked with me to target specifec modal

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

Jakob · Accepted Answer · 2023-07-17 10:57:26Z

1

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, 2023 at 10:57

Jakob

1,2263 gold badges17 silver badges27 bronze badges

2 Comments

WiseGuy Over a year ago

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

Jakob Over a year ago

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

Erose · Accepted Answer · 2018-11-12 11:03:43Z

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

Collectives™ on Stack Overflow

Calling a function on Bootstrap modal open

7 Answers 7

Update for Bootstrap 3 and 4

8 Comments

For Showing

For Hiding

6 Comments

1 Comment

1 Comment

Comments

With bootstrap 5

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Update for Bootstrap 3 and 4

8 Comments

For Showing

For Hiding

6 Comments

1 Comment

1 Comment

Comments

With bootstrap 5

2 Comments

Comments

Linked

Related