Модальное окно средствами движка

[radrigo 180]

Всем привет.

Подскажите пример кода, чтобы использовать скрипты движка для модального окна. Хочу попробовать на своём сайте максимально избавиться от сторонних скриптов

Заранее всем признателен за подсказку.

[aleksandrhristich 107]

6 часов назад, radrigo сказал:

Всем привет.

Подскажите пример кода, чтобы использовать скрипты движка для модального окна. Хочу попробовать на своём сайте максимально избавиться от сторонних скриптов

Заранее всем признателен за подсказку.

Можно и без скриптов,например с помощью css .

А если используете bootstrap на своем сайте,то еще проще...

Изменено 29 июня 2022 пользователем aleksandrhristich

[radrigo 180]

---

Изменено 29 июня 2022 пользователем radrigo

[radrigo 180]

7 часов назад, aleksandrhristich сказал:

Можно и без скриптов,например с помощью css .

А если используете bootstrap на своем сайте,то еще проще...

Псевдокласс :target конечно классная вещь, но хотелось бы чтобы в адресной строке значение при вызове модального окна не менялось. Да и не хотелось бы загружать библиотеку bootstrap, если есть встроенный вариант.

Нашёл вот такой вариант. Вызывается модальное окно с использованием стилей движка. По всей видимости используются тоже какая-то библиотека. Хотелось бы узнать, как можно настроить, чтобы например фон не затерялся, или при колике вне модального окна оно закрывалось. Также хотелось бы узнать как отображать по вертикали не по центру, а по верхнему краю. Наверняка это как-то можно настроить в скрипте, приведённом выше.

			<script type="text/javascript">
				function loginModal() {
					$(function () {
						$('.loginModal').dialog({
							autoOpen: true,
							modal: 'true',
							width: 400,
						});
					});
				}
			</script>
			<a href="#" onclick="loginModal(); return false;">клик</a>
			<div class="loginModal" style="display: none;">Траляляля</div>

Кстати, у меня сейчас на сайте используется библиотека bootstrap.

Изменено 29 июня 2022 пользователем radrigo

[master27 38]

что за стили движка? у вас стили шаблона подключаются...

ещё простой пример css + js

https://html5css.ru/howto/howto_css_modals.php

[celsoft 6 082]

42 минуты назад, radrigo сказал:

По всей видимости используются тоже какая-то библиотека.

Все опции и функции вы можете посмотреть на https://api.jqueryui.com/dialog/

[aleksandrhristich 107]

16 часов назад, radrigo сказал:

Кстати, у меня сейчас на сайте используется библиотека bootstrap.

Тогда вообще не вижу проблем в создании этих окон. Создавайте сколько вашей душе угодно используя bootstrap.

[radrigo 180]

10 часов назад, aleksandrhristich сказал:

Тогда вообще не вижу проблем в создании этих окон. Создавайте сколько вашей душе угодно используя bootstrap.

Чтобы не загружать стороннюю библиотеку. Зачем подключать кучу скриптов, если это можно реализовать средствами движка?

[radrigo 180]

29.06.2022 в 13:25, celsoft сказал:

Все опции и функции вы можете посмотреть на https://api.jqueryui.com/dialog/

Спасибо большое.

Кое-что получилось реализовать, но некоторые вещи никак не получаются. Не понимаю, как сделать выравнивание по вертикали сверху. Полагаю, за это отвечает position https://api.jqueryui.com/dialog/#option-position

Вроде бы такой вариант должен прижать модальное окно к верху, но ничего не получается. Прошу подсказки.

			<script type="text/javascript">
				function loginModal() {
					$(function () {
						$('.loginModal').dialog({
							modal: 'true',
							width: 400,
							position: {
								my: "top",
								at: "center",
								of: window
							},
						});
					});
				}
			</script>
			<button class="btn" href="#" onclick="loginModal(); return false;">клик</button>
			<div class="loginModal" style="display: none;">Траляляля</div>

 

[webair 178]

29.06.2022 в 13:42, radrigo сказал:

Кстати, у меня сейчас на сайте используется библиотека bootstrap.

Очень много разных примеров https://getbootstrap.com/docs/4.0/components/modal/#live-demo

[aleksandrhristich 107]

13 часов назад, radrigo сказал:

...Чтобы не загружать стороннюю библиотеку. Зачем подключать кучу скриптов...

Вы себя слышите что вы говорите? У вас уже подключена библиотека bootstrap,с помощью которого вы можете создать сколько угодно модалов и при чем без подключения какойто кучи скриптов ! Средствами движка,кстати,посложнее будет реализовать.

[radrigo 180]

9 часов назад, aleksandrhristich сказал:

Вы себя слышите что вы говорите? У вас уже подключена библиотека bootstrap,с помощью которого вы можете создать сколько угодно модалов и при чем без подключения какойто кучи скриптов ! Средствами движка,кстати,посложнее будет реализовать.

Так я хочу убрать bootstrap вообще. И не думаю, что средствами движка сложнее, просто надо разобраться, для чего я и открыл эту тему

 

[aleksandrhristich 107]

14 часов назад, radrigo сказал:

Так я хочу убрать bootstrap вообще...

 

А вот это надо было с самого начала обозначить. Если не хотите лишних скриптов и т.п ,то делайте с помощью css ,как говорится и дешево и сердито.

[Oxigen 7]

1 час назад, aleksandrhristich сказал:

А вот это надо было с самого начала обозначить.

А это для кого написано

Цитата

 Хочу попробовать на своём сайте максимально избавиться от сторонних скриптов

 

Изменено 2 июля 2022 пользователем Oxigen

[dds 47]

16 часов назад, radrigo сказал:

Так я хочу убрать bootstrap вообще. 

 

Простите, а чем Вам bootstrap не понравился? Я просто интересуюсь.

[radrigo 180]

11 часов назад, dds сказал:

Простите, а чем Вам bootstrap не понравился? Я просто интересуюсь.

Как уже писал выше, просто попробовать хочу максимально избавиться от сторонних скриптов. Если например можно обойтись без библиотеки bootstrap, то почему бы это не сделать? А так bootstrap устраивает.

[radrigo 180]

Всё ещё актуально. Прошу подсказки, как прижать модальное окно кверху

[crafic 32]

position: {
my: 'center',
at: 'top-900'
}