Funkcijas izsaukšana bootstrap modālā atvēršanas režīmā

Question

Vairāk

Avots Ne AMP versija Rediģēt

Funkcijas izsaukšana bootstrap modālā atvēršanas režīmā

Kādreiz es izmantoju JQuery UI's dialogu, un tajā bija atvērt opcija, kurā var norādīt kādu Javascript kodu, kas tiks izpildīts, tiklīdz dialogs tiks atvērts. Es būtu izmantojis šo opciju, lai izvēlētos tekstu dialoglodziņā, izmantojot kādu savu funkciju.

Tagad es to gribu darīt, izmantojot bootstrap modal. Zemāk ir HTMl kods:

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

Un attiecībā uz pogu, kas atver modālo logu:

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

Es mēģināju izmantot pogas onclick klausītāju, bet brīdinājuma ziņojums tika parādīts pirms parādījās modālais logs:

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});

Arun P Johny · Accepted Answer · 2013-07-04T04:06:25+00:00

Jūs varat izmantot parādīts notikums/pierādīt notikumu, pamatojoties uz to, kas jums nepieciešams:

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

Demo: Plunkers

Atjauninājums Bootstrap 3.0 versijai

Bootstrap 3.0 versijai joprojām varat izmantot parādīto notikumu, bet jūs to izmantosiet šādi:

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

Skatiet Bootstrap 3.0 dokumentāciju šeit sadaļā "Notikumi".