Untitled

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            var popups = $(".popup");
            popups.dialog({
                autoOpen: false,
                draggable: true,
                title: "Add New Person",
                open: function(type, data) {
                    $(this).parent().appendTo("#container");
                }
            });
            $('[data-popup^="pop"]').click(function(e) {
                e.stopPropagation();
                $('#' + $(this).data('popup')).dialog("open");
            });
            $('#body1').click(function() {
                $('.ui-dialog:visible').find('.popup').dialog('close');
            });
        });
    </script>
</head>
<body id="body1">
    <input type="button" data-popup="pop101" value="Popup1" />
    <input type="button" data-popup="pop102" value="Popup2" />
    <input type="button" data-popup="pop103" value="Popup3" />

    <div it="container"></div>

    <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>
</body>
</html>