JQ UI - Alert / Confirm / Prompt boxes

by johannpickard

HTML

<!-- Alert box -->
<div id="dialog" title="Alert dialog">
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="alert">Alert Dialog</button>

<!-- Confirm box -->
<div id="dialog-confirm" title="Confirm Dialog">
    <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>
</div>
<button id="confirm">Confirm Dialog</button>

<!-- Prompt box -->
<input type="button" id="btn"name="buttonExecute" value="Enter Name">
<input type="text" id="txt1" name="textbox1">
<div id="dialog-form" title="Prompt Dialog">
    <form>
        <label for="name">Name</label>
        <input type="text" name="name" id="txt2" class="text ui-widget-content ui-corner-all" ></input>
        </form>

CSS

.ui-dialog {
    font-size:12px;
    border-color:red;
}
.ui-dialog-titlebar{
    background:red;
    padding:5px !important;
    color:#fff;    
}
.ui-dialog .ui-button{
    background:green;
    color:#fff;
    border-color:#000;
}

JavaScript

// alert
$(function () {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true
    });

    $("#alert").click(function () {
        $("#dialog").dialog("open");
    });
});

// confirm
$("#dialog-confirm").dialog({
    autoOpen: false,
    resizable: false,
    height: 170,
    modal: true,
    buttons: {
        "Yes": function () {
            $(this).dialog("close");
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});
$("#confirm").click(function () {
    $("#dialog-confirm").dialog("open");
});

// prompt
$(function() {
    $("#dialog-form").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "Ok": function() {
                var text1 = $("#txt1");
                var text2 = $("#txt2");
                //Do your code here
                text1.val(text2.val());
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
    $('#btn').click(function() {
        $("#dialog-form").dialog("open");
    });
});