Бібліотека jQuery має масу можливостей в області оформлення та управління елементами. Давайте на простому прикладі розберемо, як реалізувати плавно з'являється блок в Lightbox за допомогою jQuery.
Як це працює:
Для початку необхідно сформувати HTML-вміст сторінки:
Перейдемо до оформлення вікна Lightbox. У коді нижче відзначені властивості display: none; для блоків з класами .overlay і .lightbox, це необхідно для того, щоб на початковому етапі при відкритті сторінки блок з нашим вмістом, а також блок затінення були приховані. Блоку з класом .overlay задамо фіксовану позицію від лівого верхнього кута, щоб цей блок був напівпрозорим, додамо властивість opacity: 0.8
І останнє, що нам необхідно для повноцінного функціонування вікна Lightbox - це додати скрипт обробки подій
Розберемо докладніше, що ми робимо:
jQuery ( '. lightbox'). css (<- добавляем CSS-свойства в lightbox элемент, устанавливаем фиксированную позицию по центру, даже во время прокрутки, а также устанавливаем отступ margin в соответствии с шириной и высотой lightbox элемента. Всё это позволит нам зафиксировать блок с нашим содержимым в центре даже во время прокрутки.
jQuery ( 'a.open'). click (function (e) <- с помощью этой функции мы отображаем lightbox элемент и маску с угасания. Устанавливаем скорость затемнения и угасания 800, Вы можете сделать это быстрее или медленнее за счет уменьшения или увеличения значения соответственно.
jQuery ( 'a.close. overlay'). click (function (e) <- данной функцией мы просто скрываем lightbox элемент и наложения элементов при помощи FadeOut, в случае, если мышка была нажата или на ссылку закрытия окна Lightbox.
Ви можете завантажити приклад роботи даного скрипта з вкладення в кінці статті.