Vous pouvez être en mesure d'obtenir le comportement souhaité avec une boîte de dialogue de confirmation personnalisée, j'ai créé un contrôle de dialogue personnalisé il y a quelque temps qui m'a donné la possibilité d'avoir une boîte de dialogue de confirmation modale flexible. J'ai créé un échantillon complet jsFiddle here. Pour mes besoins, la boîte de dialogue faisait partie d'une bibliothèque js commune et affiche dès que vous l'instanciez, et peut inclure des options de contenu, de taille et de rappel de bouton de confirmation, mais vous pouvez avoir une fonction de confirmation sur l'objet de dialogue travailler pour l'initialiser et l'afficher, et retourner une réponse. Voici le code complet, qui est également dans le jsFiddle ...
// Launch the dialog from a click on an element on the page
$("#launchDialog").click(function() {
showConfirmDialog();
})
function showConfirmDialog() {
//Define the dialog options
var dlgOptions = {
width: 300,
height: 150,
modal: true,
confirm: true,
confirmopts: {
closeOnOk: true,
question: "Are you sure?",
buttons: {
Ok: {
Label: "OK",
callback: dialogOkCallback
},
Cancel: {
Label: "Cancel",
callback: dialogCancelCallback
},
}
}
}
// Initialize the dialog object and display it
var dlg = MySite.Common.createDialog("confirmDialog", "Confirmation Required", "<p>Some additional dialog content here</p>", dlgOptions, document);
}
// Handle the OK response
function dialogOkCallback() {
$("#dialogresult").html("You clicked Ok");
}
// Handle the Cancel response
function dialogCancelCallback() {
$("#dialogresult").html("You clicked Cancel");
}
// Common library with dialog code
if (typeof (MySite) == "undefined")
{ MySite = { __namespace: true }; }
MySite.Common = {
createDialog: function (tagId, title, content, options, documentobj) {
var dlg;
var dlgLeft;
var dlgTop;
// Defaults
var dlgWidth = 210;
var dlgHeight = 140;
var dlgConfirmation = "";
var dlgConfirmationContainerHTML = "";
var dlgConfirmationContainer;
var isNewDialog;
var docBody;
var dlgTag;
var dlgModalBg;
var docObj;
// Take the document object passed in or default it, this is where the dialog div will be anchored
if (documentobj) {
docObj = documentobj;
}
else {
docObj = document;
}
docBody = $(docObj.body);
// Process the options if available
if (options) {
if (options.width) {
dlgWidth = options.width;
}
if (options.height) {
dlgHeight = options.height;
}
if (options.modal) {
// Set up the background div if this is a modal dialog
dlgModalBg = $(docObj.getElementById("dialogModalBackground"));
if (dlgModalBg.length == 0) {
docBody.append("<div id='dialogModalBackground' style='background-color: #000000; z-index:9998; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.3;'> </div>");
} else {
dlgModalBg = docBody.find("#dialogModalBackground");
dlgModalBg.show();
}
}
}
// Do some dialog positioning
dlgLeft = (docObj.body.clientWidth/2) - (dlgWidth/2);
dlgTop = (docObj.body.clientHeight/2) - (dlgHeight/2) - 50;
// Make sure the dialog top value doesn't go negative
dlgTop = Math.max(dlgTop, 0);
dlg = $(docObj.getElementById(tagId));
// Create the dialog div
if (dlg.length == 0) {
isNewDialog = true;
docBody.append("<div id='dialogContainer_" + tagId + "' style='width: " + dlgWidth + "px; min-height: " + dlgHeight + "px; background-color: #ffffff; border: 1px solid darkgrey; z-index: 9999; position: absolute; top: " + dlgTop + "px; left: " + dlgLeft + "px;'><p id='dlgHeader' class='draggable_handle' style='color: #FFFFFF; margin: 0px; padding: 5px 1px 1px 5px; height: 18px; background-color: #005f9f; font-weight: bold; font-size: 1.2em; font-family: Arial;'>" + title + "<span style='float: right; font-size: 0.8em; cursor: pointer; padding-right: 4px;' id='dialogClose_" + tagId + "'>Close</span></p><div style='padding: 0px; margin: 0px 2px 0px 2px; min-height: " + (dlgHeight - 24).toString() + "px;' id='" + tagId + "'></div></div>");
dlg = docBody.find("#" + tagId);
} else {
isNewDialog = false;
dlg.html("");
docBody.find("#dialogContainer_" + tagId).show();
}
// Make the dialog draggable if that feature is available
if ($.ui) {
if ($.ui.draggable) {
docBody.find("#dlgHeader").css("cursor", "move");
docBody.find("#dialogContainer_" + tagId).draggable({ handle: ".draggable_handle" });
}
}
if (content) {
dlg.html(content);
}
// Create or update the confirmation dialog content
dlgConfirmationContainer = docBody.find("#Confirmation_" + tagId);
// Set up the buttons if this is a confirmation dialog
if (options.confirm == true) {
if (options.confirmopts.question != null) {
dlgConfirmation += options.confirmopts.question + "<br/><br/>";
}
if (options.confirmopts.buttons.Ok.Label != null) {
dlgConfirmation += "<input id='dialogOk_" + tagId + "' style='width: 45%' type='button' value='" + options.confirmopts.buttons.Ok.Label + "'/> ";
}
if (options.confirmopts.buttons.Cancel != null && options.confirmopts.buttons.Cancel.Label != null) {
dlgConfirmation += "<input id='dialogCancel_" + tagId + "' style='width: 45%' type='button' value='" + options.confirmopts.buttons.Cancel.Label + "'/>";
}
if (dlgConfirmationContainer.length == 0) {
dlg.append("<div id='Confirmation_" + tagId + "' style='padding: 3px'>" + dlgConfirmation + "</div>");
} else {
dlgConfirmationContainer.show();
dlgConfirmationContainer.html(dlgConfirmation);
}
} else {
dlgConfirmationContainer.hide();
}
// Assign click events if this is a confirmation dialog. the jQuery click() assignment normally would APPEND click events to
// the object, but those are lost when the div container html is reassigned above, so we assign the click each time this function
// is called.
if (options.confirm) {
docBody.find("#dialogOk_" + tagId).click(function (event) {
event.preventDefault();
if (options.confirmopts.closeOnOk == true) {
docBody.find("#dialogContainer_" + tagId).hide();
docBody.find("#dialogModalBackground").hide();
}
if (!options.confirmopts.keepOnOk) {
docBody.find("#Confirmation_" + tagId).hide();
}
if (options.confirmopts.buttons.Ok.callback != null) {
options.confirmopts.buttons.Ok.callback();
}
});
docBody.find("#dialogCancel_" + tagId).click(function (event) {
event.preventDefault();
docBody.find("#dialogContainer_" + tagId).hide();
docBody.find("#dialogModalBackground").hide();
if (options.confirmopts.buttons.Cancel.callback != null) {
options.confirmopts.buttons.Cancel.callback();
}
});
}
docBody.find("#dialogClose_" + tagId).click(function (event) {
event.preventDefault();
docBody.find("#dialogContainer_" + tagId).hide();
docBody.find("#dialogModalBackground").hide();
});
dlg.closeDialog = function() {
docBody.find("#dialogContainer_" + tagId).hide();
docBody.find("#dialogModalBackground").hide();
};
return dlg;
},
__namespace: true
};
Je ne vois pas d'autre moyen que d'utiliser un Promises. en particulier si vous utilisez des appels ajax ainsi –
J'avais une exigence d'avoir un dialogue personnalisé qui pourrait fonctionner comme window.confirm, j'ai créé une fonction de dialogue dans une bibliothèque javascript commune qui prend des options pour quel message, les boutons à afficher, avec bouton Cliquez sur les rappels, etc. L'appeler affiche la boîte de dialogue sur la page et il pourrait facilement avoir une fonction de confirmation pour retourner booléen. En utilisant cette même approche, je pense que vous pourriez obtenir le même comportement que window.confirm. Si vous êtes intéressé par cela, je peux poster une réponse avec des extraits de code – AK3800
@ AK3800 s'il vous plaît postez une réponse si vous avez atteint cette fonctionnalité. – Prajwal