Перейти к публикации

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


Рекомендованные сообщения

Всем привет.

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

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

Ссылка на сообщение
Поделиться на других сайтах
6 часов назад, radrigo сказал:

Всем привет.

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

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

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

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

Изменено пользователем aleksandrhristich
Ссылка на сообщение
Поделиться на других сайтах
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.

Изменено пользователем radrigo
Ссылка на сообщение
Поделиться на других сайтах

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

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

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

Ссылка на сообщение
Поделиться на других сайтах
42 минуты назад, radrigo сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
16 часов назад, radrigo сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
10 часов назад, aleksandrhristich сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
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>

 

Ссылка на сообщение
Поделиться на других сайтах
29.06.2022 в 13:42, radrigo сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
13 часов назад, radrigo сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
9 часов назад, aleksandrhristich сказал:

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

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

 

Ссылка на сообщение
Поделиться на других сайтах
14 часов назад, radrigo сказал:

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

 

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

Ссылка на сообщение
Поделиться на других сайтах
1 час назад, aleksandrhristich сказал:

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

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

Цитата

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

 

Изменено пользователем Oxigen
Ссылка на сообщение
Поделиться на других сайтах
16 часов назад, radrigo сказал:

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

 

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

Ссылка на сообщение
Поделиться на других сайтах
11 часов назад, dds сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
  • 4 недели спустя...

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...