У цій статті ми розглянемо, як створити просте спливаюче вікно HTML:
Для початку створимо базову HTML-розмітку модального вікна і відкривається посилання:
У наведеному вище коді ми створили посилання. Потім ми створили саме спливаюче вікно при натисканні на посилання HTML.
В наступному кроці нам потрібно додати стилі модального вікна:
Перед тим, як зробити спливаюче вікно в HTML. залишилося додати JQuery. щоб воно виводилося при кліці по посиланню і розміщувалося в середині екрану:
Спочатку ми вибираємо все теги з name = "modal". потім витягуємо з них посилання href. Після цього отримуємо ширину і висоту екрану, щоб розмістити спливаюче вікно по середині.
Не забудьте підключити бібліотеку JQuery. інакше створити спливаюче вікно HTML не вийде:
Все готово, і наше просте JQuery модальне вікно повинно працювати нормально.
Налаштування cookies
Якщо ви не хочете, щоб спливаюче вікно виводилося кожен раз при завантаженні сторінки, тоді використовуйте cookies. Для цього створимо новий файл з ім'ям popup.js. Він буде містити весь код JS і JQuery. Спочатку додамо в нього функції createCookie (). readCookie () і eraseCookie ():
Після цього потрібно змінити наш код JQuery для HTML спливаючого вікна з текстом і помістити його в функцію з ім'ям myPopup ():
Як бачите, ми видалили функцію .click (). так як спливаюче вікно не буде управлятися зовнішньої функцією. Ми також видалили e.preventDefault (). Отже, ми не будемо використовувати посилання для виведення модального вікна.
Після того, як ми додали ці чотири функції в файл popup.js. потрібно додати останню частину коду JQuery. яка буде закривати спливаюче вікно HTML.
Все готово. Давайте поекспериментуємо з функціями і зробимо так, щоб модальне вікно показувалося тільки кожні 7 днів. Для цього створюємо змінну з ім'ям popup. яка зчитує cookies з ім'ям popup:
Потім створюємо конструкцію if else. щоб перевірити, чи існують cookies. Якщо так, то нічого не робимо. Інакше входимо в цикл, створюємо cookies на 7 днів і виводимо спливаюче вікно при натисканні на посилання HTML:
От і все! Ми реалізували просту систему cookie. Тепер можна видалити наступну частину з HTML-коду. якщо ми використовуємо куки:
Переклад статті «Create a Simple jQuery Modal Window» був підготовлений дружною командою проекту Сайтобудування від А до Я.