JQuery popup with auto center,width and height

JavaScript
1

I have three popups to show on a same page.

(1) when I click any of the above three, the popup should display at the center of the browser automatically and the position, width(auto), height(auto) should be similar for all the popups and it should not differ.

(2) I need to adjust the opacity of my background where it shouldn’t allow me to operate anything at the backend until I close the popup, but right now I could see some of the div borders, images, buttons at the background when I open popup .

I need something like this : http://www.joomdle.com/en/forum/r09-support/10576-moodle-joomdle-joomla (in discussion 4)
I would appreciate your help. Here is my code

<html>
 <head>
   <script src="../../../js/jqueryv1.10.2.js"></script>
   <script>
    $(document).ready(function()
    {
      $('.wings').click(function(event)
      {
        $(this).next('.popupbox').fadeIn("slow");
        $('body').css('background','#333');
        //$("body").css({ "background":"#333", "opacity":"0.4","filter":"alpha(opacity=40)" });
      });

       $('.popupclose').click(function(event)
       {
           unloadPopupBox();
           $('body').css('background','white');
       });

       function unloadPopupBox()
       {
          $('.popupbox').fadeOut("normal");
       }
       $(".popupbox").hide();
    });
   </script>
   <style>
    .container {font-family:verdana; font-size:13px; margin:0px auto; width:1200px; }
    .popupbox { position:center; background:#FFFFFF;  z-index:100px; -moz-box-shadow: 0 0 5px lightgray; -webkit-box-shadow: 0 0 5px lightgray;
                box-shadow:0 0 5px lightgray; display:none; min-width:100%; min-height:100%; overflow:auto;}
    .popupclose { border:0px solid lightgray; color:#6FA5E2; line-height:15px; float:right; cursor:pointer; text-decoration:none; }
   </style>
 </head>

 <body>

  <div class="container">

    <!-- popup1-->
     <a class="wings" style="background:#8AC007;color:#FFF;font-weight:bold;">Popup1</a>
     <div class="popupbox"><div style="height:30px;"><img class="popupclose" src="../../../images/close.png" style="float:right;"></img></div>
     <img src="train.jpg"/>
     </div>
    <!-- popup1-->

    <!-- popup2-->
    <div style="margin-top:10px;">
      <input type="button" class="wings" value="Popup2"/>
      <div class="popupbox">
      <div style="height:30px;"><img class="popupclose" src="../../../images/close.png" style="float:right;"></img></div>
       <table>
        <tr><td>USERNAME : </td><td><input type="text" size="30%"></td></tr>
        <tr><td>PASSWORD : </td><td><input type="password" size="30%"></td></tr>
        <tr><td><input type="submit" value="LOGIN"></td></tr>
       </table>
    </div>
    <!-- popup2-->

    <!-- popup3-->
    <div style="margin-top:10px;">
      <p class="wings">click on the image to view big screen</div>
      <div class="popupbox"><div style="height:30px;"><img class="popupclose" src="../../../images/close.png" style="float:right;"></img></div>
      <div><img class="wings" src="god.jpg"/></div>
    </div>
    <!-- popup3-->
   </div><!--container-->

 </body>
</html>