Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
    <title>jQuery UI Dialog</title>
    <script>
        $(document).ready(function () {
            $(".popup").dialog({
                autoOpen: false,
                draggable: true,
                modal: true,
                title: "Modal Title",
                open: function (type, data) {
                    $(this).parent().appendTo("form");
                }
            });
        });
        function showDialog(id) {
            $('#' + id).dialog("open");
        }
        function closeDialog(id) {
            $('#' + id).dialog("close");
        }
        $(".ui-widget-overlay").live("click", function () { $(".popup").dialog("close"); });
    </script>
</head>
<body id="body1">
    <input type="button" onclick="showDialog('pop101');" value="Popup1" />
    <input type="button" onclick="showDialog('pop102');" value="Popup2" />
    <input type="button" onclick="showDialog('pop103');" value="Popup3" />

    <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>
    <div style="background: skyblue" id='dialog1' class="popup">
    </div>
</body>
</html>