Question

确认框只有两个选项：确定和取消。

我想自己制作一个，所以我可以添加第三个按钮：保存并继续。但是我目前不知道如何解决的问题是：一旦自定义确认对话框启动，如何阻止以前运行的脚本（或导航）运行？然后如何让按钮返回确认值？

我对确认对话框的理解是这样的：它是一个可视布尔值，可以阻止页面上的导航和脚本。那么，我该如何模仿呢？

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>

如何创建自己的确认对话框？

3 个答案: