Как добавить модальное окно к блогу на примере формы регистрации

Снова небольшой мануал по кастомизации блога. На этот раз, добавление модального окна, готовый рабочий пример можно посмотреть у нас по кнопке "Регистрация докладчика".
А сама реализация выглядит следующим образом:
- добавляем HTML/Java Script виджет, куда и будем писать код
- далее подключаем jquery

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  

- добавляем скрипт, которая будет выполнять все действия

 <script>$(document).ready(function() {  
      $('a.register-window').click(function() {  
        //получаем имя переменной из ссылки   
           var registerBox = $(this).attr('href');  
           //появление окна, настраиваем скорость прояления как нравиться  
           $(registerBox).fadeIn(300);  
           //центрируем окно  
           var popMargTop = ($(registerBox).height() + 24) / 2;   
           var popMargLeft = ($(registerBox).width() + 24) / 2;   
           $(registerBox).css({   
                'margin-top' : -popMargTop,  
                'margin-left' : -popMargLeft  
           });  
           // добавляем маску вокрук модального окна 
           $('body').append('<div id="mask"></div>');  
           $('#mask').fadeIn(300);  
           return false;  
      });  
      //Закрытие окна по иконке закрыть, либо по клику вне окна  
      $('a.close, #mask').live('click', function() {   
       $('#mask , .register-popup').fadeOut(300 , function() {  
           $('#mask').remove();   
      });   
      return false;  
      });  
 });</script>  

- добавляем CSS

 <style>/* Маска для подложки, по умолчанию не отображается */  
 #mask {  
      display: none;  
      background: #000;   
      position: fixed; left: 0; top: 0;   
      z-index: 10;  
      width: 100%; height: 100%;  
      opacity: 0.8;  
      z-index: 999;  
 }  
 /* Окошко */  
 .register-popup{  
      display:none;  
      background: #98CBFF;  
      padding: 10px;        
      border: 2px solid #ddd;  
      float: left;  
      font-size: 1.2em;  
      position: fixed;  
      top: 50%; left: 50%;  
      z-index: 99999;  
      box-shadow: 0px 0px 20px #999; /* CSS3 */  
     -moz-box-shadow: 0px 0px 20px #999; /* Firefox */  
     -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */  
      border-radius:3px 3px 3px 3px;  
     -moz-border-radius: 3px; /* Firefox */  
     -webkit-border-radius: 3px; /* Safari, Chrome */  
 }  
/* Иконка закрытия */
 img.btn_close { Position the close button  
      float: right;   
      margin: -28px -28px 0 0;  
 }  
 </style>  

- Код, который ниже, размещаем там, где хотим отображать ссылку или кнопку, по которой будет открываться модальное окно

 <center>  
 <a href="#register-box" class="register-window" alt="Стать докладчиком" title="Стать докладчиком"><img src="http://dl.dropbox.com/u/41556146/Blog%20icons/btn_18.png"/></a>  
 </center>  

- Заполняем содержимое модального окна, в нашем случае, это форма регистрация

 <iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=dEVUVDdaa3Zxb0prazRBUlYzMnFubFE6MQ" width="460" height="300" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>  
/* Иконка закрытия */
 <a href="#" class="close"><img src="http://cdn-sg1.pgimgs.com/images/pg/close-button.png" class="btn_close" title="Закрыть" alt="Close" /></a>