確認框只有兩個選項:ok和cancel。如何創建我自己的確認對話框?
我想自己做一個,所以我可以添加第三個按鈕:保存並繼續。但是我目前不知道如何解決的問題是:一旦自定義確認對話框啓動,如何阻止以前運行的腳本(或導航)運行?然後如何使按鈕返回值以進行確認?
我對確認對話框的理解是這樣的: 這是一個可視化的布爾值,它有權阻止頁面上的導航和腳本。那麼,我該如何模仿?
確認框只有兩個選項:ok和cancel。如何創建我自己的確認對話框?
我想自己做一個,所以我可以添加第三個按鈕:保存並繼續。但是我目前不知道如何解決的問題是:一旦自定義確認對話框啓動,如何阻止以前運行的腳本(或導航)運行?然後如何使按鈕返回值以進行確認?
我對確認對話框的理解是這樣的: 這是一個可視化的布爾值,它有權阻止頁面上的導航和腳本。那麼,我該如何模仿?
如果你想有一個可靠的成熟的解決方案...使用jQuery ......它會在每一個瀏覽器中運行,無需擔心糟糕的IE瀏覽器等http://jqueryui.com/demos/dialog/
我第二個這個解決方案...剛拿了jQuery UI(對話框)並用我的覆蓋他們的CSS。像那麼簡單... – TheCuBeMan
在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。 那麼你可以添加回叫你加保存任何按鈕繼續等
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>
你想用一個JavaScript'確認()'(基於瀏覽器)來做到這一點還是要使用jQuery(基於DOM)?你包含了兩個標籤。 – Mathletics
在JavaScript中,當您等待用戶操作時,您不會停下來:您設置了一個回調(一個函數),您的對話框將關閉。通過執行諸如doDialog(標題,內容,答案,doOnClose)''來打開對話庫。 –
你想創建自己的?有數百萬個jQuery插件。你可以通過在頁面上覆蓋一些div來「阻止」。 – Esailija