Edit in JSFiddle

  * 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"
        }, {
            // The Cancel button
            text: cancelButtonText,
            click: function () {
        close: function (event, ui) {
            // Destroy the jQuery UI dialog and remove it from the DOM
            // 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()) {

    return deferred.promise;

$(function () {
    $("#dialogButton").click(function () {

        var confirmMessage = $("#confirmMessage").val();
        if (confirmMessage) {
            .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 class="form-group">
    <label for="confirmTitle">Title</label>
    <input type="text" class="form-control" id="confirmTitle" placeholder="Enter confirm title (optional)">
<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 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)">
<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;