[英]How do I create my own confirm Dialog?
确认框只有两个选项:确定和取消。
我想自己做一个,所以我可以添加第三个按钮:保存并继续。 但是我当前不知道如何解决的问题是:自定义确认对话框启动后,如何阻止以前运行的脚本(或导航)运行? 然后如何使按钮返回确认值?
我对确认对话框的理解是:这是一个可视化的布尔值,具有阻止页面上的导航和脚本的功能。 那么,我该如何模仿呢?
如果您想要一个可靠的,可靠的解决方案...使用jQuery ...它将在每种浏览器上运行,而无需担心糟糕的IE等。http://jqueryui.com/demos/dialog/
在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();
}
}
});
正如其他人所指定的,如果您只想进行对话框,则可能不需要自己的库。
您可以使用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"> </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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.