Amit Dhamu

Writes Code

Modal Dialog Popups

The javascript alert() feature is a pretty naff looking confirmation popup. Using the jQuery UI plugin, you can create custom dialog boxes to match your CSS and design.

HTML

// Create an empty div
<div id="dialog"></div>

// Create a trigger
<a id="launchConfirm">Launch Confirm Box</a>


jQuery

// Function
function launchConfirm(title, msg) {
    $("#dialog").text(msg); 
    $("#dialog").dialog({
        minWidth: 100,
        minHeight: 100,
        title: title,
        resizable: false,
        modal: true,
        buttons: {
            "OK": function() {
                $(this).dialog("close");
             return true;
            },
            Cancel: function() {
                $(this).dialog("close");
            return false;
            }
        }
    });
}

// Usage
$("#launchConfirm").live("click", function() {
    return launchConfirm("Title of Popup", "Popup Description");
});


You will need to ensure that you have jQuery and the jQuery UI running on your site for this to work.


popup / dialog / jquery / jquery ui

← Error Document Target By Attribute →