Is there a way i can use a jQuery UI based modal dialog for confirmation instead of the normal JS confirm()? I would like to be able to do something like:

if (jquery_ui_confirm('Are you sure?')) {
    // do something
}

Thanks in advance.

Is there a way i can use a jQuery UI based modal dialog for confirmation instead of the normal JS confirm()? I would like to be able to do something like:

if (jquery_ui_confirm('Are you sure?')) {
    // do something
}

Thanks in advance.

• javascript
• jquery
• jquery-ui

• It's a bit more plicated because you need to provide the HTML for the dialog box and handle the result as callbacks, but yeah there's no reason this can't work. Have you tried it? – Rup Commented May 24, 2013 at 10:26
• 2 ... Its part of the basic docs; jqueryui./dialog/#modal-confirmation – Alex K. Commented May 24, 2013 at 10:27
• you can also use Jquery Alert plugin as well. – Muhammad Sannan Khalid Commented May 24, 2013 at 10:34

3 Answers 3

var jqConfirm = function(msg, success) {
    var dialogObj = $("<div style='display:none'>"+msg+"</div>");
    $("body").append(dialogObj);
    $(dialogObj).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "OK": function() {
         success();
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  };

Call this function using

jqConfirm("This will delete all records", function(){ /*do something here */});

yes you can.. you can provide requried html to dialog

<script>
$(function() {
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "OK": function() {
                $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
        }
    });
});
</script>

HTML Code

<div id="dialog-confirm" title="Confirmation Dialog">
    <p>
        <span class="ui-icon ui-icon-alert"
            style="float: left; margin: 0 7px 20px 0;"></span>Would you like to delete this item?
    </p>
</div>

you can also use Jquery Alert plugin as well. Here is a link: http://labs.abeautifulsite/archived/jquery-alerts/demo/