jQuery UI & Dialog: Confirmation With Modal Dialog Box

This entry is part 6 of 6 in the series jQuery UI Dialog

jQuery UI Dialog – Modal confirmation

Confirm an action that may be destructive or important.

Set the modal option to true, and specify primary and secondary user actions with the buttons option.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>jQuery UI Dialog - Modal confirmation</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        $(function () {
                resizable: false,
                height: 200,
                modal: true,
                buttons: {
                    'Delete all items': function () {
                    Cancel: function () {

<div id='dialog-confirm' title='Empty the recycle bin?'>
    <p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>These items will be
        permanently deleted and cannot be recovered. Are you sure?</p>

<p>Sed vel diam id libero <a href='http://example.com'>rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus
    rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor
    elit eros a lectus.</p>

Try The Code

Series Navigation<< jQuery UI & Dialog: Modal Mode

Leave a comment

Leave a Reply