Am folosit pentru a utiliza JQuery UI's de dialog, și a avut "deschis" opțiune, în cazul în care aveți posibilitatea să specificați un cod Javascript pentru a executa o dată la dialog este deschis. Mi-ar fi folosit această opțiune pentru a selecta textul în caseta de dialog folosind o funcție trebuie.
Acum vreau să fac asta folosind bootstrap's modal. Mai jos este codul HTMl:
<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'
Si pentru ca butonul care deschide modal:
<a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>
Am încercat să folosesc un onclick ascultător de buton, dar mesajul de alertă a fost afișat înainte modal apărut:
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
Puteți utiliza aratat eveniment/spectacol eveniment bazat pe ceea ce ai nevoie:
$( "#code" ).on('shown', function(){
alert("I want this to appear after the modal has opened!");
});
Demo: Plunker
Pentru Bootstrap 3.0, puteți utiliza în continuare arătat eveniment, dar nu ar folosi astfel:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
Vezi Bootstrap 3.0 docs aici sub "Evenimente".
nu va funcționa.. utilizarea $(fereastra)
în loc
//PENTRU A ARĂTA
$(window).on('shown.bs.modal', function() {
$('#code').modal('show');
alert('shown');
});
//PENTRU CEI CARE SE ASCUND
$(window).on('hidden.bs.modal', function() {
$('#code').modal('hide');
alert('hidden');
});
dacă cineva mai are o problema singurul lucru care funcționează perfect pentru mine de a găsi (încărcate.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
});
});
Puteți utiliza belw cod pentru a afișa și a ascunde bootstrap model.
$('#my-model').on('shown.bs.modal', function (e) {
// do something here...
})
și, dacă doriți pentru a ascunde modelul, apoi puteți folosi codul de mai jos.
$('#my-model').on('hidden.bs.modal', function() {
// do something here...
});
Sper că acest răspuns este utilă pentru proiectul dumneavoastră.