/*- Маска -*/  
#mask {
  position:absolute;
  left:0;
  top:0;
  width:100%!important;
  height:100%!important;
  z-index:9000;
  background:#000 url(http://webelement.info/materials/WebModal/bg.png);
  display:none;
}
/*- Общие стили окошка -*/  
#box .window {
  overflow: hidden;
position:absolute;
  left:0;
  top:0;
  max-width:560px;
  max-height:90%;
  display:none;
  z-index:9999;
  padding:0px;
-moz-box-shadow: 0px 0px 25px #000000;
-webkit-box-shadow: 0px 0px 25px #000000;
box-shadow: 0px 0px 25px #000000;
}
/*- Верхняя часть окошка -*/  
.window .window_header {
font: 16px Trebuchet MS;
display:block;
position:absolute;
left:0;
top:-10px;
width:560px;
font-weight: bold;
color:#ddd;
background:#2d2d2d;
padding:0px;
}
/*- Отступы контента и стиль текста -*/  
#window_content{
color:#999;
font: 13px Verdana,sans-serif;
  padding:50px 20px 20px 20px;
}
/*- Отступы для title окошка -*/  
.window_title{
padding:20px 10px 10px 20px;
}
/*- Стиль для первого окошка -*/  
#box #dialog {
  width:100%;
  height:auto;
  background-color:#333;
}
/*- Стиль для второго окошка -*/  
#box #dialog2 {
  width:100%;
  height:auto;
  background-color:#333;
}
/*- Стиль для видео -*/  
#box #video {
  width:100%;
  height:auto;
  background-color:#333;
}
/*- Убираем отступы для видео -*/  
#box #video #window_content{
padding:50px 0 0 0;
}
/*- Ссылка на закрытие окна -*/  
.close{
font-weight:normal;
display:inline-block;
position:absolute;
top:20px;
right:10px;
}

<script type="text/javascript">  
$(document).ready(function() {  
  $('a[name=modal]').click(function(e) {  
  e.preventDefault();  
  var id = $(this).attr('href');  
  $('#mask').fadeIn(300);  
  $('#mask').fadeTo("slow",0.7);  
  var winH = $(window).height();  
  var winW = $(window).width();  
  $(id).css('top', winH/2-$(id).height()/2);  
  $(id).css('left', winW/2-$(id).width()/2);  
  $(id).fadeIn(300);  
  });  
  $('.window .close').click(function (e) {  
  e.preventDefault();  
  $('#mask, .window').hide();  
  });  
  $('#mask').click(function () {  
  $(this).hide();  
  $('.window').hide();  
  });  
});  
</script>  

<!-- Внутри этого дива должны быть ваши окна -->  
<div id="box">  

<!-- Много контента -->  
<div id="dialog" class="window">  
<div class="window_header">  
<div class="window_title">Модальное окно<a href="#"class="close"/>Закрыть</a></div>  
</div>  
<div id="window_content">  
Lorem Ipsum
</div>  
</div>  
<!-- Меньше контента-->  
<div id="dialog2" class="window">  
<div class="window_header">  
<div class="window_title">Модальное окно 1<a href="#"class="close"/>Закрыть</a></div>  
</div>  
<div id="window_content">  
Lorem Ipsum
</div>  
</div>  
<!-- Вариант с видео-->  
<div id="video" class="window">  
<div class="window_header">  
<div class="window_title">Video<a href="#"class="close"/>Закрыть</a></div>  
</div>  
<div id="window_content">  
<iframe width="560" height="315" src="http://www.youtube.com/embed/ID видео" frameborder="0" allowfullscreen></iframe>  
</div>  
</div>  
<!-- Маска (Обязательно в конце всех окошек)-->  
<div id="mask"></div>  
</div>