/** * Show a "confirm" dialog to the user (using jQuery UI's dialog) * * @param {string} message The message to display to the user * @param {string} okButtonText OPTIONAL - The OK button text, defaults to "Yes" * @param {string} cancelButtonText OPTIONAL - The Cancel button text, defaults to "No" * @param {string} title OPTIONAL - The title of the dialog box, defaults to "Confirm..." * @returns {Q.Promise<boolean>} A promise of a boolean value */ function confirmDialog(message, okButtonText, cancelButtonText, title) { okButtonText = okButtonText || "Yes"; cancelButtonText = cancelButtonText || "No"; title = title || "Confirm..."; var deferred = Q.defer(); $('<div title="' + title + '">' + message + '</div>').dialog({ modal: true, buttons: [{ // The OK button text: okButtonText, click: function () { // Resolve the promise as true indicating the user clicked "OK" deferred.resolve(true); $(this).dialog("close"); } }, { // The Cancel button text: cancelButtonText, click: function () { $(this).dialog("close"); } }], close: function (event, ui) { // Destroy the jQuery UI dialog and remove it from the DOM $(this).dialog("destroy").remove(); // If the promise has not yet been resolved (eg the user clicked the close icon) // then resolve the promise as false indicating the user did *not* click "OK" if (deferred.promise.isPending()) { deferred.resolve(false); } } }); return deferred.promise; } $(function () { $("#dialogButton").click(function () { var confirmMessage = $("#confirmMessage").val(); if (confirmMessage) { confirmDialog(confirmMessage, $("#confirmTitle").val(), $("#confirmOKButtonText").val(), $("#confirmCancelButtonText").val()) .then(function (confirmed) { $("#results").html("And the result of the confirm was: " + confirmed); }); } }); });
<h3>Roll your own confirm</h3> <div class="form-group"> <label for="confirmMessage">Message</label> <input type="text" class="form-control" id="confirmMessage" placeholder="Enter confirm message" value="Answer me this!"> </div> <div class="form-group"> <label for="confirmTitle">Title</label> <input type="text" class="form-control" id="confirmTitle" placeholder="Enter confirm title (optional)"> </div> <div class="form-group"> <label for="confirmOKButtonText">OK Button text</label> <input type="text" class="form-control" id="confirmOKButtonText" placeholder="Enter confirm OK Button text (optional)"> </div> <div class="form-group"> <label for="confirmOKButtonText">Cancel Button text</label> <input type="text" class="form-control" id="confirmCancelButtonText" placeholder="Enter confirm Cancel Button text (optional)"> </div> <button type="button" class="btn btn-primary" id="dialogButton">Show me the dialog...</button> <p><strong class="text-success" id="results"></strong></p>
body { padding: 0em 1em 0em; } p { padding-top: 1em; }