Изскачащи модали с персонализиран стил
Преди няколко години плъгинът за лайтбокс влезе в живота ни и промени вида на модалния прозорец. Всички сме срещали модали като уеб дизайнери или като потребители. Но проблемът беше, че стилът на модала беше същият, тъй като беше зададен от плъгина. Този урок ще ви покаже как да създадете модален прозорец с персонализиран стил.
Какво е необходимо за урока?
Този урок изисква библиотеката jQuery.
Стъпка 1: HTML
Първо трябва да добавим таг с атрибут rel (задаване на rel за модален прозорец), изскачащ клас (за активиране на модален прозорец). Използваме 3 a тагове за 3 различни типа модали.
След това пишем маркирането за модалното съдържание, което може да бъде навсякъде на страницата. Важно е идентификаторът на маркиране да съответства на атрибута rel на тага a.
Трябва да подготвим три изображения за фон на нашите модали.
И задайте стиловете за нашите елементи:
Стъпка 3 jQuery
Първо, нека извикаме библиотеката jQuery, чийто файл може да се намира както на локалния компютър, така и директно на сайта на Google.
Библиотеката jQuery вече е прикачена към вашия документ. Също така трябва да създадем js файл, наречен custom.js, да го прикачим към документа и да напишем код в него.
Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: www.webdesignersdesk.com Преведен: Сергей Фастунов Урокът е създаден: 22 юни 2010 г. Преглеждания: 89532 Правила за препечатване
5 последни урока от рубриката "jQuery"
jQuery анимация за писане
Днес бихме искали да ви разкажем за библиотеката TypeIt, безплатен плъгин за jQuery. С негова помощ можете да симулирате писане. Ако всичко е настроено правилно, можетепостигне много реалистичен ефект.
Хронология с jQuery
jQuery плъгин за времева линия.
Начертайте диаграма на Гант
jQuery плъгин за диаграма на Гант.
AJAX и PHP: Качване на файл
Пример за това как да качите файл с помощта на PHP и jQuery ajax.