Всплывающее окно (Настройки/Разное) - Всплывающие - Каталог статей

Всплывающее окно (Настройки/Разное)

Всплывающее окно (Настройки/Разное) позволяет быстро и удобно настроить определенные параметры. Оно обычно появляется на экране, когда пользователь нажимает на определенную кнопку или выполняет определенные действия. В окне настроек пользователь может изменить различные параметры, такие как язык интерфейса, настройки безопасности, настройки звука и многое другое.

Пример

zONas-TL
Смена дизайна:

zONas-TR
Смена дизайна:

zONas-BL
Смена дизайна:

zONas-BR
Смена дизайна:

all-c0

all-c1

all-c2

all-c3

all-c4

all-c5

all-c6

all-c7

all-c8

Авто корекция относительно краёв окна (Горизонтально/Вертикально)

Подключение к сайту:


 <!-- Добавить в <head>..</head>: -->
 <script src="https://code.jquery.com/jquery-3.7.1.min.js" defer></script><!-- Библиотека jQuery -->
 <link href="https://zam.usite.pro/db/publ/zONas/1-0-0/m.css" rel="stylesheet"><!-- Вид `Меню` -->
 <script src="https://zam.usite.pro/db/publ/zONas/1-0-0/m.js" defer></script><!-- Мозг `Меню` -->

► Исходники(css, js): github (m. - Сокращённый вариант, ok. - Подробный)

Для выбора стороны появления подсказки добавим в атрибут class:

Верх в лево class~~zONas-TL~~

Верх в право class~~zONas-TR~~

Низ в лево class~~zONas-BL~~

Низ в право class~~zONas-BR~~

Для выбора расцветки добавим в атрибут class:

Красная class~~all-c0~~

Зелёный class~~all-c1~~

Оранжевый class~~all-c2~~

Жёлтый class~~all-c3~~

Синий class~~all-c4~~

Серый class~~all-c5~~

Розовый class~~all-c6~~

Океан class~~all-c7~~

Белый/Чёрный class~~all-c8~~


 <div class="zONas-TL all-c4">
   <button>button</button><!-- Ваша кнопка (Открыть/Закрыть Всплывающее окно (Настройки/Разное)) -->
   <div><div>
     Текст..
   </div></div>
 </div>

Запускаем:


 <!-- Добавить в конец <body>..</body>: -->
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     zONas.$();//★ Всплывающее окно (Настройки/Разное) (Запускаем)
   });
 </script>

Для тёмного сайта:


 <!-- Необходимо добавить в body class="temaT" -->
 <body class="temaT">

Категория: Всплывающие | Добавил: zam (01.08.2024)

Просмотров: 20 | Теги: CSS, JavaScript, JS, jQuery, всплывающее окно, HTML | Рейтинг: 0.0/0

Всего комментариев: 0