Как сделать модальное окно на сайте

DEMO

Часто на сайтах для авторизации, регистрации, заказа обратных звонков используют модальное окно. Это такое окно, которое появляется при клике по какому либа элементу веб страницы. Так как такие окна стали неотемлемым элементом веб сайтов я решил написать простое модальное окно на css .

И так начнём создание модального окна. Для начала решим что нам нужно сделать и как мы это будем делать. Мы создадим модальное окно. Оно будет представлять из себя обыкновенный див с полями ввода данных. Окно будет позиционироваться абсолютно и распологаться в части экрана которую мы зададим. При загрузке страницы окно должно быть скрыто и появляться только при клике по определённому элементу. Скрывать окно мы будем с помощью большого отрицательного отступа. При активации окна отступ будет меняться и окно будет выезжать. Для анимации движения модальное окно css3 свойства будет использовать. Так же при открытии окна мы будем активировать див с небольшой прозрачностью для затемнения других элементов сайта. Скрываться и появляться он будет за счёт css свойства visibility. Теперь нам останется эмулировать клик по ссылке средствами css для активации модального окна. Мы будем использовать для этого метод с псевдоклассом "target". Напомню как это работает. В ссылке мы назначаем хэш тег. При нажатии на ссылку в виде кнопки с хэштегом происходит переход к диву с id хэштега. Этот див попадает в target. Происходит активация псевдокласса target. Подробнее о реализации клика средствами css можно прочитать в моём посте Click средствами CSS. Такими вот методами мы должны вывести при клике по элементу окно и затемняющий див. Осталось разобраться как окно будет закрываться. В углу окна мы сделаем ссылку в виде кнопки, а так же сам затемняющий див будет у нас ссылкой. При клике по затемняющему диву или кнопке таргет будет переходить к их ссылкам и наше модальное окно и затемняющий див должны скрываться.Вот такие вот основные задачи нам надо реализовать.

   <div class="boxbutt">
         <div class="button"><a href="#login">Жми здесь!</a></div>             
   </div>
   <div class="centered">
       <a href="#x" class="overlay" id='login'></a>
       <div  class="login">
           <a class="close" href="#close">x</a>
           <h2>Авторизация</h2>               
       </div>
       <a href="#x" class="overlay" id='join'></a>
   </div>

По html коду я думаю всё понятно. Имеем модальное окно с классом ".login". В окне есть кнопка-ссылка с классом ".close" для закрытия окна. И перед окном затемняющий див с классом ".overlay". Действия вешаем на кнопку ".button". Отдельно хочу обратить внимание на диа с классом ".centered". Он нужен для центрирования абсолютно спозиционированных модальных окон.

Теперь перейдём к css стилям. Для уменьшения размера листинга не будем показывать css код для кнопки вызова модального окна.

.boxbutt{/*блок для центровки кнопки*/
     width: 170px;
     margin: 0 auto;
}
.button{
  /*---------*/
}
.button a{
  /*---------*/
}
.button{
  /*---------*/
}

.button:hover{
   /*---------*/
}
.button:active{
   /*---------*/
}
/*===================Модальное окно==================*/
.centered{
    position: relative;
     width: 350px;
     height: 0;
     margin: 0 auto;
}
.login{
    position: absolute;
    width: 300px;
    height: 300px;
    background-color:  #f7f7f7;
    border: 1px solid #64B8F0;
    top: -1000px;
    padding: 25px;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    z-index: 1000;
}

.login h2{
    margin: 0;
    text-align: center;
    margin-bottom: 10px;
}
/*========кнопка закрытия модального окна===========*/
.close{
    display: block;
    width: 30px;
    height: 30px;
    background: #DF4831;
    font-size: 20px;
    text-decoration: none;
    color: #FFF;
    text-align: center;
    line-height: 30px;
    position: absolute;
    top: 0;
    right: 0;
}
.close:hover{
    background-color:  #D14;
}

/*======перекрывающий слой при открытии окна========*/
.overlay {
    background-color: #000;
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    /*прозрачность для IE*/
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;

    z-index: 1;
    -webkit-transition: opacity .5;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
/*====обработка действий====*/
.overlay:target {
    visibility: visible;
    opacity: 0.3;
}
.overlay:target+.login{
    top: 80px;
    z-index: 1000;
}

Теперь нам осталось разобраться с ИЕ. Для отображения скруглённых углов и градиентов подключаем через условные коментарии библиотеку PIE. Соответственно подключим и библиотеку jquery. Так как ИЕ 7-8 плохо работает с нашим методом организации клика на css, мы напишем для него скрипт на jquery и подключим через условный коментарий для ИЕ

            
<!--[if IE]><script type="text/javascript">
 $(function() {
     if (window.PIE) {
         $('.button').each(function() {
             PIE.attach(this);
         });
     }
 });          
</script><![endif]-->       
 <!--[if lt IE 9]><script type="text/javascript">
 $(function() {        
   $('.button').click(function(){

        $('.login').animate({'top':'80px'},{duration: 500});

        $('.overlay').css('visibility', 'visible');
   });
   $('.overlay, .close').click(function(){
       $('.overlay').css('visibility', 'hidden');
       $('.join').animate({'top':'-1000px'},{duration: 500});
       $('.login').animate({'top':'-1000px'},{duration: 500});
   });
   $("a").attr("hideFocus", "true");/*для того что бы не было рамок во круг ссылок*/
 });          
</script><![endif]-->