Создаем диалоговые окна на CSS и jQuery

Предисловие

Статья первоначально была написана для моего блога, но я решил выложить и сюда.
Оригинал: perkovec.blogspot.com/2014/04/css-jquery.html

Создание

Конечно же сейчас есть куча jQuery плагинов которые помогают оформить диалоговые окна на сайте, но зачем лишне нагружать сайт всякими плагинами. Итак начнём.

Сначала подключим jQuery:

<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>

Теперь разберём HTML разметку:

<!-- Кнопка открытия диалогового окна -->
<button onClick='opendialog()' class='button'>Открыть диалогово окно</button>
<!-- Div с классом back-dialog будет затемнять страницу -->
<div class="back-dialog" id="dialog"> 
<!-- Блок с нашим контентом -->
    <div class="dialog-content">
<!-- Заголовок и кнопка закрытия окна -->
        <div class="dialog-title">
            <span>Заголовок диалогового окна</span>
            <a class='close-dialog' href='javascript: closedialog()'></a>
       </div>
       Текст диалогового окна
    </div>
</div>

CSS стили:

body{
    margin:0;
}
/* Делаем затемнение заднего плана */
.back-dialog{
    width:100%;
    min-height:100%;
    background-color: rgba(0,0,0,0.5);
    overflow:hidden;
    position:fixed;
    top:0px;
}
/* Позиционируем блок с контентом */
.dialog-content{
    position: relative;
    overflow: hidden;
    overflow-y: auto;
    padding: 0 10 0 10;
    margin:40px auto 0px auto;
    min-width:150px;
    max-width:600px;
    min-height: 150px;
    max-height: 600px;
    padding-bottom: 10px;
    background-color: #c5c5c5;
    border-radius: 0 0 5 5;
}
/* Позиционируем верхний бар */
.dialog-title{
    margin: 0 -10 0 -10;
    text-align: center;
    position: relative;
    vertical-align: middle;
    height: 30px;
    background-color: #3498DB;
    color: #fff;
}

.dialog-title span{
    font-size: 25px;
    padding-left: 10px;
}
/* Делаем кнопку закрытия окна */
.close-dialog{
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    color: #fff;
    background-color: #2574A9;
    height: 30px;
    width: 30px;
    border:0;
    text-decoration: none;
}

.close-dialog:before{
    font-family: Arial;
    color: rgba(255, 255, 255, 0.9);
    content: "x";
    font-size: 20px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
outline: none;
}
/* Кнопка открытия окна */
.button {
  position: relative;
  vertical-align: middle;
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
  padding-left: 8%;
  padding-right: 8%;
  padding-top: 4%;
  padding-bottom: 4%;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #3498db;
  border: 0;
  border-bottom: 2px solid #2a8bcc;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -3px #2a8bcc;
  box-shadow: inset 0 -3px #2a8bcc;
    outline: none;
}
.button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

Ну и наконец jQuery:

$(document).ready(function(){
        $("#dialog").hide(); //скрываем окно при загрузке страница
    });

    function opendialog(){
        $("#dialog").fadeIn(); //плавное появление блока
    }

    function closedialog(){
        $("#dialog").fadeOut(); //плавное исчезание блока
    }

Посмотреть пример можно тут:
jsfiddle.net/Perkovec/dd9xX