I want to override javascript confirm with jQuery dialog box. Here is my overridin code:
window.confirm = function(message, caption = 'Confirmation'){
$(document.createElement('div')).attr({title: caption, 'class': 'dialog'}).html(message).dialog({
position:['center',100],
dialogClass: 'fixed',
buttons: {
"OK": function(){
$(this).dialog('close');
return true;
},
"Cancel": function(){
$(this).dialog('close');
return false;
}
},
close: function(){
$(this).remove();
},
draggable: false,
modal: true,
resizable: false,
width: 'auto'
});
};
And here is my action code:
if(confirm('Are you sure?') == false) { return false; }
This code does not work. How can I do this?
It is because the confirm method shows and dialog and it returns before the buttons are pressed.
You can use a callback method to solve it
window.confirm = function (message, callback, caption) {
caption = caption || 'Confirmation'
$(document.createElement('div')).attr({
title: caption,
'class': 'dialog'
}).html(message).dialog({
position: ['center', 100],
dialogClass: 'fixed',
buttons: {
"OK": function () {
$(this).dialog('close');
callback()
return true;
},
"Cancel": function () {
$(this).dialog('close');
return false;
}
},
close: function () {
$(this).remove();
},
draggable: false,
modal: true,
resizable: false,
width: 'auto'
});
};
confirm('dd', function () {
//what every needed to be done on confirmation has to be done here
console.log('confirmed')
})
Demo: Fiddle
You cannot use it with if..else
statement
I know is an old question but for completness I left my solution, is a plugin for jquery you only need to copy/paste this content save as .js file and include (along with jquery-ui) in your html and all alert and confirm dialog are replaced.
I must point that above solution only calls the callback on user success (press OK button), but I wanted the callback to be called always, this way you can implement more behaviour
jQuery.cambiarAlert = function (options)
{
var defaults = {
title: "Atención",
buttons: {
"Aceptar": function()
{
jQuery(this).dialog("close");
}
}
};
jQuery.extend(defaults, options);
delete defaults.autoOpen;
window.alert = function ()
{
var html;
try {
html = arguments[0].replace(/\n/, "<br />")
} catch (exception) {
html = arguments[0]
}
jQuery("<div />", {
html: "<div class='.navbar-inverse .navbar-inner'>" + html + "</div>"
}).dialog(defaults);
};
window.confirm = function (message, callback, caption) {
caption = caption || 'Confirmación'
$(document.createElement('div')).attr({
title: caption,
'class': 'dialog'
}).html(message).dialog({
buttons: {
"Aceptar": function () {
$(this).dialog('close');
if (callback && typeof(callback) == "function"){
callback(true);
}
return true;
},
"Cancelar": function () {
$(this).dialog('close');
if (callback && typeof(callback) == "function"){
callback(false);
}
return false;
}
},
close: function () {
$(this).remove();
},
draggable: false,
modal: true,
resizable: false,
width: 'auto'
}).position({
my: "center",
at: "center",
of: window
});
};
return this;
};
$(function ()
{
$.cambiarAlert();
});
The point here is that I do call callback(true) or callback(false) this way I can write a callback function that use the result as a parameter of the function itself
So in my code I can do:
confirm("Are you sure?", function(result){
if (result){
//Perform ajax call
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.