JavaScript: Диалоговое окно для сайта

Многие посетители Блога, прочитав вступление к данному материалу, подумали, что во всемирной паутине Интернета есть множество вариантом диалогового окна, которые отличаются между собой и дизайном и принципом работы. Работа диалогового окна, в основе которого лежит jQuery или Mootools создает некоторую изюминку своему «родителю» и к тому же исправно выполняет свое предназначение.
Что тут говорить, с такой точкой зрения тяжело спорить – согласен, красивые, изумительные, но вот как установить?
Если наличие диалогового окна на сайте закладывается в момент его разработки, то в таком случаи, все можно предусмотреть и устранить возможные конфликты библиотек. Но если же нужно внедрить окно в работающий сайт – то здесь уже не всегда можно устранить конфликты и приходиться искать альтернативные решения.

Вот совсем недавно, точно с такой ситуацией пришлось столкнуться самому. Необходимо было разместить форму «Задать вопрос специалисту», которая должна выводится посетителю в диалоговом окне. Задача на первый взгляд не сложная, но приступив к реализации желаемого – начались проблемы. То на сайте прекращает работать слайд-шоу, то не выводится фотогалерея во весь экран и тд. И причиной всех этих проблем – конфликт библиотек.

Поиск и анализ возможных решений в Интернете привел к альтернативному решению, нужно создать нечто свое, что будет включать некоторые готовые решения и которое будет основывается на JavaScript-у и CSS.
Хватит разговаривать! Пора уже приступать к самой структуре окна.

Начнем с HTML-структуры окна, которое в будущем, должно легко изменять свой дизайн и отображение. И так,
<div id=»openModal»>
    <div id=»dral» draggable=»true»>
        <a href=»#close» title=»Close»>X</a> /закрываем окно/
        <h3>Message</h3>
        <div>
            <p> Содержание окна </p>
        </div>
    </div>    
</div>
в представленном выше коде разместили возможность закрытия диалогового окна, так же разместили заголовок. Содержание окна вывели в отдельный абзац, который по первому зову можно с легкостью изменить.
Теперь сам стиль оформления.
<style>
/* Simple reset */
*{
margin:0;
padding:0;
}
.modalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99990;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
#dral {
resize: both;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
/* настройка ширины и высоты окна */
min-width: 320px;
min-height: 240px;
max-width: 640px;
max-height: 480px;
}
/* затемнение*/
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
/* заголовок */
h3 {
position: absolute;
margin: 4 12px;
/*width: inherit;*/
padding: 0 4px;
text-align: center;
color: rgb(109, 132, 180);
}
.modalDialog > #dral {
width: 400px;
position: relative;
margin: 10% auto;
border-radius: 4px;
border-bottom-right-radius:0;
background: #fff;
background: -webkit-linear-gradient(#fff, #999);
border: 6px solid rgba(109, 132, 180, .5);
background-clip: padding-box;
}
/* сontent */
.dlgContent {
margin: 16px 12px;
padding-top: 10px;
}
/* Close Button */
.close {
position: absolute;
background: red;
line-height: 25px;
top: 0px;
right: 4px;
width: 42px;
text-decoration: none;
text-align: center;
color: white;
font-weight: bold;
z-index: 99999;
}
.close:hover {
background: #8B0000;
}
</style>

Как выводить это окно? Для примера, вывод диалогового окна будем производить с помощью простой ссылки
<a href=»#openModal»>Открыть диалоговое окно</a>
которую легко можно заменить на оригинальную кнопку или же на баннер. Разместим эту ссылку выше блока-окна (выше строки <div id=»openModal»>). И вот что у нас получилось в итоге:

Самое время раскрыть JavaScript, который выводит диалоговое окно и создает эффект открытия.
Считаю, что расписывать функции не стоит, поскольку это займет некоторое время и вызовет некую путаницу, поэтому ниже приведу только сам JavaScript. Но если все же возникнут вопросы и замечания, рад буду их созерцать в комментариях и по возможности постараюсь дать полный ответ или прокоментировать.

<script language=»javascript»>
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData(«text/html»,
(parseInt(style.getPropertyValue(«left»),10) — event.clientX) + ‘,’ + (parseInt(style.getPropertyValue(«top»),10) — event.clientY));
}
function drag_over(event) {
event.preventDefault();

return false;
}
function drop(event) {
event.stopPropagation();
var offset = event.dataTransfer.getData(«text/html»).split(‘,’);
var dm = document.getElementById(‘dral’);

dm.style.left = (event.clientX + parseInt(offset[0],10)) + ‘px’;
dm.style.top = (event.clientY + parseInt(offset[1],10)) + ‘px’;

event.preventDefault();

return false;
}
var dm = document.getElementById(‘dral’);
dm.addEventListener(‘dragstart’,drag_start,false);
document.body.addEventListener(‘dragover’,drag_over,false);
document.body.addEventListener(‘drop’,drop,false);
</script>