jquery - javascript - mimik window.confirm with keeping boolean returns -
i'm trying implement own confirmation box in javascript. don't want change places have used window.confirm. so, created proxy on window.confirm.
like,
(function (proxied) { window.confirm = function () { var res = myconfirm.apply(this, arguments); return res; }; })(window.confirm); the problem is, myconfirm based on promise ever confirm there, acting boolean. proper solution situation? possible make custom function works window.confirm?
is there anyway, can return boolean or other values function depends on async call?
you may able desired behavior custom confirmation dialog, created custom dialog control while ago gave me ability have flexible modal confirmation dialog. created full sample jsfiddle here. needs, dialog part of common js library , displays instantiate it, , can include options content, size, , confirmation button callbacks, have confirm function on dialog object work initialize , display it, , return response. here's complete code, in jsfiddle...
// launch dialog click on element on page $("#launchdialog").click(function () { showconfirmdialog(); }) function showconfirmdialog() { //define dialog options var dlgoptions = { width: 300, height: 150, modal: true, confirm: true, confirmopts: { closeonok: true, question: "are sure?", buttons: { ok: { label: "ok", callback: dialogokcallback }, cancel: { label: "cancel", callback: dialogcancelcallback }, } } } // initialize dialog object , display var dlg = mysite.common.createdialog("confirmdialog", "confirmation required", "<p>some additional dialog content here</p>", dlgoptions, document); } // handle ok response function dialogokcallback() { $("#dialogresult").html("you clicked ok"); } // handle cancel response function dialogcancelcallback() { $("#dialogresult").html("you clicked cancel"); } // common library 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 document object passed in or default it, dialog div anchored if (documentobj) { docobj = documentobj; } else { docobj = document; } docbody = $(docobj.body); // process options if available if (options) { if (options.width) { dlgwidth = options.width; } if (options.height) { dlgheight = options.height; } if (options.modal) { // set background div if 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(); } } } // dialog positioning dlgleft = (docobj.body.clientwidth / 2) - (dlgwidth / 2); dlgtop = (docobj.body.clientheight / 2) - (dlgheight / 2) - 50; // make sure dialog top value doesn't go negative dlgtop = math.max(dlgtop, 0); dlg = $(docobj.getelementbyid(tagid)); // create 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 dialog draggable if feature 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 confirmation dialog content dlgconfirmationcontainer = docbody.find("#confirmation_" + tagid); // set buttons if 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 confirmation dialog. jquery click() assignment append click events // object, lost when div container html reassigned above, assign click each time function // 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 }; 
Comments
Post a Comment