Подождите "возвращаемое значение" из Javascript modal

Хорошо, я отнюдь не гуру JavaScript, и, возможно, я все еще думаю о разработке программного обеспечения для настольных компьютеров, но этого я пытаюсь достичь:

  • Я использую Модификации Bootstrap Twitter
  • В некоторых случаях, прежде чем действие произойдет, я хочу проверить его с помощью "Вы уверены?". (Да/Нет) Модальный диалог.

Вопрос:

  • Какова должна быть внутренняя логика?

Я имею в виду:

  • Пользователь нажимает кнопку А (в конечном счете выполняет действие А)
  • Я хочу запустить модальный, дождаться ввода (либо из двух кнопок - да/нет), либо передать его некоторой процедуре проверки перед выполнением (или нет) действийA

Этот мой HTML-код для модального (должны ли кнопки быть - каким-то образом) действовать через их onclick javascript-процедуры?) - также обратите внимание, что #confirmMessage будет переменной.

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

Просто идея:

  • Напишите функцию типа checkBeforeExec(message,functionToExec)
  • Установите #confirmMessage сообщение и да 'href до javascript:functionToExec
  • Имеет смысл?

Я знаю, что это может показаться немного запутанным - но я просто не знаю, что самый удобный для javascript способ сделать это будет...

Ответы

Ответ 1

Я создал диспетчер диалога вокруг модального, с confirm вспомогательной функцией, которая делает это по существу:

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
});

Кроме того, вы должны сделать кнопку "Отмена" и "Да" data-dismiss="modal".

Вот скрипка, с простым примером моего менеджера диалогов.

Обратите внимание, что если вы используете Bootstrap 3, вы должны добавить обработчик к событию hidden.bs.modal вместо hidden.

Ответ 2

С помощью jquery вы можете использовать что-то вроде

$('.btn').click(function(){
   val=$(this).val()
   if(val=='Yes'){
     //continue the processing
   }
})