Топ плагинов jQuery. Плагин leanModal.js

Дата публикации: 2017-02-28

От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. На очереди у нас несколько плагинов для реализации модальных окон. В этой статье мы поработаем с плагином leanModal.js. Использование этого плагина не сложнее, чем работа с плагином SimpleModal, с которым мы работали в предыдущей статье.

Итак, перейдем на официальную страницу плагина leanModal.js. Здесь мы можем найти все необходимое: описание плагина, преимущества его использования, примеры его работы, ну и, конечно же, здесь мы можем скачать его.

Топ плагинов jQuery. Плагин leanModal.js

К слову, одним из плюсов выбранного плагина модальных окон является его малый вес – всего-то около одного килобайта. Давайте подключим эту мелочь к нашей странице 🙂

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.leanModal.min.js"></script>

1 2	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.leanModal.min.js"></script>

Следующим шагом, согласно инструкции, нам потребуется добавить стили для заднего фона модального окна:

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

#lean_overlay {

position: fixed;

z-index:100;

top: 0px;

left: 0px;

height:100%;

width:100%;

background: #000;

display: none;

}

Ну и, наконец, небольшой скрипт для работы модального окна. Как и в примере из прошлой статьи, нам потребуется блок модального окна, который изначально нужно скрыть, а также кнопка, которая покажет модальное окно.

<div id="basic-modal" class="modal">
	<h3>Это модальное окно</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, nihil!</p>
</div>
<a class="btn btn-success open-modal" rel="leanModal" href="#basic-modal">Открыть окно</a>

<h3>Это модальное окно</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, nihil!</p>

</div>

<a class="btn btn-success open-modal" rel="leanModal" href="#basic-modal">Открыть окно</a>

#basic-modal{display: none;}

1	#basic-modal{display: none;}

Для кнопки мы указали атрибут rel, к которому и привяжем вызов модального окна. Также нас интересует атрибут href кнопки, именно этот атрибут и свяжет ссылку с самим модальным окном, поэтому id модального окна и href ссылки должны совпадать.

И остался сам скрипт, который вызовет метод leanModal() при клике по кнопке.

$('a[rel*=leanModal]').leanModal();

1	$('a[rel*=leanModal]').leanModal();

Также добавим немного стилей для самого модального окна:

.modal{
	width: 600px;
	height: 200px;
	padding: 30px; 
	display:none;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
}

.modal{

width: 600px;

height: 200px;

padding: 30px;

display:none;

background: #fff;

border-radius: 5px;

box-shadow: 0px 0px 4px rgba(0,0,0,0.7);

}

Осталось протестировать результат.

Топ плагинов jQuery. Плагин leanModal.js

Ну что же, мне нравится. Думаю, вы найдете применение для столь простого, но полезного плагина, который идеально подойдет, скажем для формы авторизации на вашем сайте. Ну а у меня на этом все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Метки: jquery