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:
JavaScript
x
9
1
<div id="code" class="modal hide fade">
2
<div class="modal-header">
3
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
4
<h3>Modal header</h3>
5
</div>
6
<div class="modal-body">
7
<pre>
8
print 'Hello World'
9
And as for the button that opens the modal:
JavaScript
1
2
1
<a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>
2
I tried to use an onclick listener of the button, but the alert message was displayed before the modal appeared:
JavaScript
1
4
1
$( ".code-dialog" ).click(function(){
2
alert("I want this to appear after the modal has opened!");
3
});
4
Advertisement
Answer
You can use the shown event/show event based on what you need:
JavaScript
1
4
1
$( "#code" ).on('shown', function(){
2
alert("I want this to appear after the modal has opened!");
3
});
4
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:
JavaScript
1
4
1
$('#code').on('shown.bs.modal', function (e) {
2
// do something...
3
})
4
See the Bootstrap 3.0 docs here under “Events”.