Структура и разметка модального окна

Модальное окно которое открываеться при клике на кнопку.

<!-- Кнопка которая отркрывает модальное окно. Начало -->
<button data-drop=".drop-window">
    Открыть модальное окно
</button>
<!-- Кнопка которая отркрывает модальное окно. Конец --> 

В атрибут data-drop указываеться клас, id модального окна.

Модальное окно должно иметь такой же клас или id который указан в атрибуте data-drop и class=”drop” которий прятает окно при загрузке страницы.

Разметка модального окна:

 <!-- Модальное окно. Начало -->
    	<div class="drop drop-window drop-style">
<!-- Кнопка закрыть окно. Начало -->
        	<button type="button" class="icon_times_drop" data-closed="closed-js"></button>
<!-- Кнопка закрыть окно. Конец →
<!-- Загаловок окна. Начало -->
        	<div class="drop-header">
            	Ура! Открылось!
        	</div>
<!-- Загаловок окна. Конец →
<!-- Основной контент окна. Начало -->
        	<div class="drop-content">
            	<div class="inside-padd">
                	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            	</div>
        	</div>
<!-- Основной контент окна. Конец -->
<!-- Блок для футера окна. Начало -->
        	<div class="drop-footer">
            	Lorem ipsum dolor sit amet
        	</div>
<!-- Блок для футера окна. Конец -->    	 
    	</div>
<!-- Модальное окно. Конец -->

Кнопка закрития модального окна:

<button type="button" class="icon_times_drop" data-closed="closed-js"></button>

Стилизация

Для того что бы модальное окно не было на всю ширину экрана можно прописать в стилях так:

.drop-window {
	width: 90%;
	max-width: 600px;
}

Инициализация

Инициализация через селектор:

$(selector initialization).drop({object of options})

Инициализация через data атрибут:

• Html:

<a href="#" id="popup-refer" data-drop="#inline">inline</a>

• jQ:

$('#popup-refer').data('dropper', '#inline');

Методы

• open

открыть модальное окно:

$('selector of element which opens popup').drop('open');

• close

закрыть модальное окно:

$('selector of popup').drop('close');

• update

Ресайз модальное окно:

$('selector of popup').drop('update');