OK, nie jestem w żadnym razie JavaScript Guru, a może wciąż myślę o rozwoju oprogramowania Desktop, ale to właśnie staram się osiągnąć:

  • Używam Modale Twitter Bootstrap
  • W niektórych przypadkach, zanim odbywa się akcja, chcę ją zweryfikować za pomocą "jesteś pewien?" (Tak / nie) modalne okno dialogowe.

Pytanie:

  • Co powinno być logika wewnętrzna?

To znaczy:

  • Przycisk kliknięcia użytkownika (który ostatecznie wykonuje działanie)
  • Chcę uruchomić modal, poczekaj na wejście (jeden z 2 przycisków - Tak / Nie) i / lub przekazać ją do niektórych procedury sprawdzania przed wykonaniem (lub nie) Actiona

Ten mój kod HTML dla modalności (jeśli przyciski będą - jakoś - działanie za pośrednictwem procedur onclick?) - Należy również pamiętać, że #confirmMessage będzie zmienna.

<div class="modal fade hide" id="confirmAlert">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3 id="confirmTitle">Are you sure?</h3>
    </div>

    <div class="modal-body">
        <p id="confirmMessage">Body</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>
        <a href="#" class="btn btn-danger">Yes</a>
    </div>
</div>

Tylko pomysł:

  • Napisz funkcję jak checkBeforeExec(message,functionToExec)
  • Ustaw #confirmMessage do wiadomości i tak "href do javascript:functionToExec
  • Ma sens?

Wiem, że może brzmieć trochę mylące - ale po prostu nie wiem, jaki jest najbardziej przyjazny w JavaScript, który ma zrobić ...

16
Dr.Kameleon 13 sierpień 2012, 13:53

2 odpowiedzi

Najlepsza odpowiedź

Stworzyłem menedżera dialogów wokół Modal, z funkcją operatora {x0}}, która ma zasadniczo to:

var callback = function(result) {
  alert(result);
}); // define your callback somewhere

$('#confirmAlert').on('click', '.btn, .close', function() {
  $(this).addClass('modal-result'); // mark which button was clicked
}).on('hidden', function() {
  var result = $(this).find('.modal-result').filter('.btn-danger').length > 0; // attempt to filter by what you consider the "YES" button; if it was clicked, result should be true.

  callback(result); // invoke the callback with result
});

Również należy wykonać zarówno przycisk Anuluj, jak i Tak data-dismiss="modal".

Oto skrzypce, z prostym przykładem mojego menedżera dialogów.

Uwaga, że jeśli używasz Bootstrap 3 , należy dodać przewóz do zdarzenia hidden.bs.modal zamiast hidden.

14
mcserep 17 luty 2016, 11:24

Z jQuery możesz użyć czegoś takiego

$('.btn').click(function(){
   val=$(this).val()
   if(val=='Yes'){
     //continue the processing
   }
})
1
Nick 13 sierpień 2012, 10:06