Funkcijos iškvietimas atidarius bootstrap modalinį langą

Question

Daugiau

Šaltinis Ne AMP versija Redaguoti

Funkcijos iškvietimas atidarius bootstrap modalinį langą

Naudojau "JQuery UI's" dialogo langą ir jame buvo atidaryti parinktis, kurioje galima nurodyti tam tikrą Javascript kodą, kuris bus vykdomas atidarius dialogo langą. Šią parinktį panaudočiau dialogo lange esančiam tekstui parinkti naudodamas turimą funkciją.

Dabar noriu tai padaryti naudodamas bootstrap's modal. Toliau pateikiamas HTMl kodas:

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

O dėl mygtuko, kuris atidaro modalinį langą:

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

Bandžiau naudoti mygtuko "onclick" klausytoją, bet įspėjamasis pranešimas buvo rodomas prieš pasirodant modalui:

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

Sprendimas

Arun P Johny

Šaltinis Ne AMP versija Redaguoti

Galite naudoti rodomas įvykis/parodyti įvykį pagal tai, ko jums reikia:

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

Demonstracinis pavyzdys: Plunker

Atnaujinta "Bootstrap 3.0

Naudodami "Bootstrap 3.0" vis dar galite naudoti parodytą įvykį, tačiau jį naudotumėte taip:

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

Žr. "Bootstrap 3.0" dokumentus čia skiltyje "Įvykiai".

Vibhor

Redaguotas atsakymas priešpietr spalis 2019 в 8:51

295

0

Komentarai (10)