javascript - Using jQuery UI modal dialog as confirm - Stack Overflow

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

Share Improve this question Follow asked May 24, 2013 at 10:25 Gonçalo MarrafaGonçalo Marrafa 2,11344 gold badges2929 silver badges3535 bronze badges 3

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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/