Ik gebruikte JQuery UI's dialoogvenster, en het had de open
optie, waar u sommige Javascript code kunt specificeren om uit te voeren zodra het dialoogvenster wordt geopend. Ik zou die optie hebben gebruikt om de tekst in het dialoogvenster te selecteren met behulp van een functie die ik heb.
Nu wil ik dat doen met behulp van bootstrap's modal. Hieronder staat de HTMl code:
<div id="code" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<pre>
print 'Hello World'
En wat betreft de knop die de modal opent:
<a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>
Ik heb geprobeerd om een onclick listener van de knop te gebruiken, maar het waarschuwingsbericht werd getoond voor de modal verscheen:
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
U kunt de getoonde gebeurtenis/show gebeurtenis gebruiken op basis van wat u nodig hebt:
$( "#code" ).on('shown', function(){
alert("I want this to appear after the modal has opened!");
});
Demo: Plunker
Voor Bootstrap 3.0 kun je nog steeds het getoonde event gebruiken maar dan als volgt:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
Zie de Bootstrap 3.0 docs hier onder "Events".
zal niet werken... gebruik in plaats daarvan $(window)
//VOOR TONEN
$(window).on('shown.bs.modal', function() {
$('#code').modal('show');
alert('shown');
});
//VOOR VERBORGEN
$(window).on('hidden.bs.modal', function() {
$('#code').modal('hide');
alert('hidden');
});