Как создать свой собственный диалог подтверждения?

Question

В поле подтверждения есть только два варианта: ok и cancel.

Я хотел бы сделать это самостоятельно, поэтому я могу добавить третью кнопку: сохранить и продолжить. Но проблема, которую я в настоящее время не знаю, как решить, заключается в следующем: как только диалог пользовательского подтверждения будет завершен, как я могу заблокировать ранее запущенный скрипт (или навигацию)? а затем как заставить кнопки возвращать значения для подтверждения?

мое понимание диалогового окна подтверждения: Это визуальное логическое значение, которое имеет право блокировать навигацию и скрипты на странице. Итак, как я подражать этому?

Answer 1

Если вы хотите надежное проверенное решение ... С помощью JQuery ... это будет работать в любом браузере, не заботясь о дерьмовый IE и т.д. http://jqueryui.com/demos/dialog/

Answer 2

В JavaScript, вы не остановитесь, пока вы ожидая действия пользователя: вы устанавливаете обратный вызов (функцию), который ваш диалог вызывает при закрытии.

Вот пример небольшой диалоговой библиотеки, где вы можете увидеть, как можно передавать обратные вызовы.

dialog = {}; 

dialog.close = function() { 
    if (dialog.$div) dialog.$div.remove(); 
    dialog.$div = null; 
}; 

// args.title 
// args.text 
// args.style : "", "error" (optionnel) 
// args.buttons : optional : map[label]->function the callback is called just after dialog closing 
// args.doAfter : optional : a callback called after dialog closing 
dialog.open = function(args) { 
    args = args || {}; 
    if (this.$div) { 
     console.log("one dialog at a time"); 
     return; 
    } 
    var html = ''; 
    html += '<div id=dialog'; 
    if (args.style) html += ' '+args.style; 
    html += '><div id=dialog-title>'; 
    html += '</div>'; 
    html += '<div id=dialog-content>'; 
    html += '</div>'; 
    html += '<div id=dialog-buttons>'; 
    html += '</div>'; 
    html += '</div>'; 
    this.$div=$(html); 
    this.$div.prependTo('body'); 
    $('#dialog-title').html(args.title); 
    $('#dialog-content').html(args.text); 
    var buttons = args.buttons || {'Close': function(){return true}}; 
    for (var n in buttons) { 
     var $btn = $('<input type=button value="'+n+'">'); 
     $btn.data('fun', buttons[n]); 
     $btn.click(function(){ 
      if ($(this).data('fun')()) { 
       dialog.close(); 
       if (args.doAfter) args.doAfter(); 
      } 
     }); 
     $btn.appendTo($('#dialog-buttons')); 
    } 
    this.$div.show('fast'); 
    shortcuts.on('dialog', { 
     27: function(){ // 27 : escape 
      dialog.close(); 
     } 
    }); 
} 

Два образца вызова:

dialog.open({ 
    title: 'ccccc Protection Error', 
    text: 'There was an error related to cccc Protection. Please consult <a href=../cccc.jsp>this page</a>.', 
    style: 'error' 
}); 

var ok = false; 
dialog.open({ 
     title: sometitle, 
     text: someHtmlWithInputs, 
     buttons: { 
      'OK': function() { 
       if (// inputs are valid) ok = true; 
       return true; 
      }, 
      'Cancel': function() { 
       return true; 
      } 
     }, 
     doAfter: function() { 
      if (ok) { 
       if (newvg) { 
        cccmanager.add(vg); 
       } else { 
        cccmanager.store(); 
       } 
       if (doAfter) doAfter(); 
      } 
     } 
    }); 

Как указано в других, вы не можете свою собственную библиотеку, если вы просто хотите, чтобы сделать диалог.

Answer 3

Вы можете создать свой собственный javascript jquery и bootstrap. , то вы можете добавить CallBack на любую кнопку вы добавите сохранить продолжить и т.д.

function Delete() 
 
{ 
 
    Confirmation("Are You Sure ?",function(response){ 
 
    if(response) 
 
    { 
 
    // continue 
 
    alert("Confirmed"); 
 
    } 
 
    
 
    }); 
 
    } 
 
    
 
    function Confirmation(message, callback) { 
 
     if ($('#modalConfirmation_MyTools') != undefined) $('#modalConfirmation_MyTools').remove(); 
 
     $('body').append('<div class="modal" id="modalConfirmation_MyTools">\ 
 
      <div class="modal-dialog modal-sm">\ 
 
      <div class="modal-content">\ 
 
       <div class="modal-header">\ 
 
        <h3><span style="color:#f49e42;font-size:40px;" class="fa fa-exclamation-circle"></span> <span id="spanMessage_MyTools">&nbsp;&nbsp;</span></h3>\ 
 
       </div>\ 
 
       <div class="modal-footer">\ 
 
        <button type="button" data-dismiss="modal" class="btn btn-danger" id="btnConfirm_MyTools">Confirm</button>\ 
 
        <button type="button" data-dismiss="modal" class="btn btn-primary">Cancel</button>\ 
 
       </div>\ 
 
      </div>\ 
 
    </div>\ 
 
</div>'); 
 

 
     document.getElementById('spanMessage_MyTools').append(message); 
 
     $('#modalConfirmation_MyTools').modal('toggle'); 
 
     var confirmBtn = document.getElementById('btnConfirm_MyTools'); 
 
     confirmBtn.onclick = function() {callback(true);} 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="text-center"> 
 
<br /><br /> 
 

 
<button type="button" class="btn btn-danger" onclick="Delete()">Delete</button> 
 
</div>