jquery弹出隐藏的div

jquery弹出隐藏div

代码如下：

$(document).ready(function() {

   //select all the a tag with name equal to modal
   $('#media').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();
   var id = '#dialog';
   //Get the screen height and width
   var maskHeight = $(document).height();
   var maskWidth = $(window).width();
 
   //Set heigth and width to mask to fill up the whole screen
   $('#mask').css({'width':maskWidth,'height':maskHeight});
  
   //transition effect 
   $('#mask').fadeIn(1000);
   $('#mask').fadeTo("slow",0.8);
 
   //Get the window height and width
   var winH = $(window).height();
   var winW = $(window).width();
              
   //Set the popup window to center
   $(id).css('top',  winH/2-$(id).height());
   $(id).css('left', winW/2-$(id).width()/2);
 
   //transition effect
   $(id).fadeIn(2000);
   var content=$('#content').val();
   document.getElementById("frameContent1").value=content;
  
   });
  $(document).ready(function() {

   //select all the a tag with name equal to modal
   $('#media').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();
   var id = '#dialog';
   //Get the screen height and width
   var maskHeight = $(document).height();
   var maskWidth = $(window).width();
 
   //Set heigth and width to mask to fill up the whole screen
   $('#mask').css({'width':maskWidth,'height':maskHeight});
  
   //transition effect 
   $('#mask').fadeIn(1000);
   $('#mask').fadeTo("slow",0.8);
 
   //Get the window height and width
   var winH = $(window).height();
   var winW = $(window).width();
              
   //Set the popup window to center
   $(id).css('top',  winH/2-$(id).height());
   $(id).css('left', winW/2-$(id).width()/2);
 
   //transition effect
   $(id).fadeIn(2000);
   var content=$('#content').val();
   document.getElementById("frameContent1").value=content;
  
   });
  
   
  
   //if mask is clicked
   $('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
   });  
  
  });
   
  
   //if mask is clicked
   $('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
   });  
  
  });

  //div的样式:

<style type="text/css">
#boxes .window {
position:absolute;
  left:0;
  top:0;
  width:640px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
  overflow:auto;
  background-color: #bfdbff;
}
.tb_border {
  border-top: 1px solid #003399;
  border-left: 1px solid #003399;
}
.td_border {
  border-right: 1px solid #003399;
  border-bottom: 1px solid #003399;
}
</style>

//事先隐藏的div

  <div id="boxes">
    <div id="dialog"  class="window">
 
    </div>
  </div>