SO #12476941

by Jacob Quant

HTML

<form id="popup-buttons">
        <input type="button" value="Popup1" data-popup-id="pop101"/>
        <input type="button" value="Popup2" data-popup-id="pop102"/>
        <input type="button" value="Popup3" data-popup-id="pop103"/>
    </form>
    <div style="background: green" id='pop101' class="popup">
    </div>
    <div style="background: orange" id='pop102' class="popup">
    </div>
    <div style="background: blue" id='pop103' class="popup">
    </div>

JavaScript

function showDialog(id) {
    $('#' + id).dialog("open");
}
function closeDialog(id) {
    $('#' + id).dialog("close");
}    

$(document).ready(function () {
    // Handle clicks on buttons
    //$("#popup-buttons").on("click", "input", function(e) {    // for new jQuery....
    $("input[type=button]").click(function(e) {      // for old jQuery
        console.log("input click", e);
        var value = $(e.currentTarget).attr("data-popup-id");
        if (value)
            showDialog($(e.currentTarget).attr("data-popup-id"));
        else
            console.log("Error: user clicked on unexpected element");
        // Stop elements further up the DOM tree from processing this event
        e.stopPropagation();
    });
    
    // Handle "other" clicks
    $("html").click(function(e) {
        console.log("default click handler", e);
        $("div.popup").each(function(i,e) {
            closeDialog($(this).attr("id"));
        });
    });
    
    $(".popup").dialog({
        autoOpen: false,
        draggable: true,
        title: "Add New Person",
        open: function (type, data) {
            $(this).parent().appendTo("form");
        }
    });
});