Всплывающее окно (Настройки/Разное) позволяет быстро и удобно настроить определенные параметры.
Оно обычно появляется на экране, когда пользователь нажимает на определенную кнопку или выполняет определенные действия.
В окне настроек пользователь может изменить различные параметры, такие как язык интерфейса, настройки безопасности, настройки звука и многое другое.
ИИ корекция:
Относительно стенок окна (Горизонтально/Вертикально)
При изменении размера браузер окна или поворот телефона (Горизонтально, Вертикально)
Список всех переменных:
id: 'svoi2' путь до <div id="svoi2" class="zONas-
ON: 'keyup' сменим обработку событий $.on('keyup.zONas');
ON: undefined по умолчанию $.on('click.zONas');
F: (d, b, N) => {} своя функция (Сработает при открытии окна)
Fx: d => {} своя функция (Сработает при закрытии окна)
Доп информация:
zONas.O.o = 8; задаём свой отступ от стенок. (По умолчанию 4)
zONas.$(); поиск всех(для запуска) <div class="zONas-, если не установлен <div id=".."
class="zONasNet" установит запрет на закрытие окна, при открытии другова. (Закрывается только при нажатии на <button)
По умолчанию установлен поиск только кнопки: <button>
Для выбора другой кнопки необходимо добавить:
id <a id="zonasb">кнопка</a>
class <a class="zonasb">кнопка</a>
Подключение к сайту:
<!-- Добавить в <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:
Верх в левоclasszONas-TL
Верх в правоclasszONas-TR
Низ в левоclasszONas-BL
Низ в правоclasszONas-BR
Для выбора расцветки добавим в атрибут class:
Краснаяclassall-c0
Зелёныйclassall-c1
Оранжевыйclassall-c2
Жёлтыйclassall-c3
Синийclassall-c4
Серыйclassall-c5
Розовыйclassall-c6
Океанclassall-c7
Белый/Чёрныйclassall-c8
Вариант 1:
<div class="zONas-TL all-c4">
<button>button</button><!-- Ваша кнопка (Открыть/Закрыть Всплывающее окно (Настройки/Разное)) -->
<div><div>
Ваш текст тут..
</div></div>
</div>
<!-- Добавить в конец <body>..</body>: -->
<script>
document.addEventListener('DOMContentLoaded', () => {
//zONas.O.o = 8;//Задаём свой отступ от стенок. (По умолчанию 4)
//zONas.$(); поиск всех <div class="zONas-, если не установлен <div id=".."
zONas.$();//★ Запускаем Всплывающее окно (Настройки/Разное)
});
</script>
Вариант 2:
Своя функция с выводом своего содержания окна
<div id="svoi2" class="zONas-TL all-c4">
<button>button</button><!-- Ваша кнопка (Открыть/Закрыть Всплывающее окно (Настройки/Разное)) -->
<div><div></div></div>
</div>
<!-- Добавить в конец <body>..</body>: -->
<script>
document.addEventListener('DOMContentLoaded', () => {
//Поиск по <div id="svoi2"
zONas.$({//★ Запускаем индивидуально для подгруза
id: 'svoi2', //Путь до <div id="svoi2" class="zONas-
F: (d, b, N) => {//Своя функция (Сработает при открытии окна)
//d = $() //<div id="svoi2" class="zONas-
//b = $() //<button
//N = $() //Путь до содержания окна
zONas.L(d, b, N, 'Тут ваш текст');//Выводим наш текст HTML. //htm=false;//Остановит вывод окна!
}
});
});
</script>
Вариант 3:
Своя функция после закрытия окна
<div id="svoi2" class="zONas-TL all-c4">
<button>button</button><!-- Ваша кнопка (Открыть/Закрыть Всплывающее окно (Настройки/Разное)) -->
<div><div></div></div>
</div>
<!-- Добавить в конец <body>..</body>: -->
<script>
document.addEventListener('DOMContentLoaded', () => {
//Поиск по <div id="svoi2"
zONas.$({//★ Запускаем индивидуально для подгруза
id: 'svoi2', //Путь до <div id="svoi2" class="zONas-
F: (d, b, N) => {//Своя функция (Сработает при открытии окна)
//d = $() //<div id="svoi2" class="zONas-
//b = $() //<button
//N = $() //Путь до содержания окна
zONas.L(d, b, N, 'Тут ваш текст');//Выводим наш текст HTML. //htm=false;//Остановит вывод окна!
$('#over').css('overflow', 'unset');//Добавим видимость
},
Fx: d => {//Своя функция (Сработает при закрытии окна)
//d = $() //<div id="svoi2" class="zONas-
$('#over').removeAttr('style');//Вернём
}
});
});
</script>
Вариант 4:
Обработка $.ajax(); + смена обработки событий keyup, input,..
<div id="svoi3" class="zONas-TL all-c4">
<button>button</button><!-- Ваша кнопка (Открыть/Закрыть Всплывающее окно (Настройки/Разное)) -->
<div><div></div></div>
</div>
<!-- Добавить в конец <body>..</body>: -->
<script>
document.addEventListener('DOMContentLoaded', () => {
//Поиск по <div id="svoi3"
zONas.$({//★ Запускаем индивидуально для подгруза
id: 'svoi3', //Путь до <div id="svoi3" class="zONas-
ON: 'keyup', //Сменим обработку событий $.on('keyup.zONas');
//ON: undefined, //По умолчанию $.on('click.zONas');
F: (d, b, N) => {//Своя функция (Сработает при открытии окна)
//d = $() //<div id="svoi3" class="zONas-
//b = $() //<button
//N = $() //Путь до содержания окна
$.ajax({
url: '/testAjax.html', //Куда отправить запрос.
dataType: 'html', //Тип данных в ответе (xml, json, script, html).
success: function(htm){ //Функция которая будет выполнена после успешного запроса.
//Тут можно обработать до вывода: htm = htm.replace(/удали меня/,'');
zONas.L(d, b, N, htm);//Выводим наш текст HTML. //htm=false;//Остановит вывод окна!
}
});
}
});
});
</script>
Вариант 5:
class="zONasNet" установит запрет на закрытие окна, при открытии другова. (Закрывается только при нажатии на <button)
<div class="zONas-TL zONasNet all-c4">
<button>button</button><!-- Ваша кнопка (Открыть/Закрыть Всплывающее окно (Настройки/Разное)) -->
<div><div>
Ваш текст тут..
</div></div>
</div>
<!-- Добавить в конец <body>..</body>: -->
<script>
document.addEventListener('DOMContentLoaded', () => {
//zONas.O.o = 8;//Задаём свой отступ от стенок. (По умолчанию 4)
//zONas.$(); поиск всех <div class="zONas-, если не установлен <div id=".."
zONas.$();//★ Запускаем Всплывающее окно (Настройки/Разное)
});
</script>
Для тёмного сайта:
<!-- Необходимо добавить в body class="temaT" -->
<body class="temaT">
Плюшкидля сайта