Содержимое модального окна

#1 26 июня 2017 в 15:42

Добрый день, Друзья!

Есть html код модального окна, вставляемого в Виджет HTML блог.

Спойлер

<!DOCTYPE html>
<head>
	<title>Создаем модальное окно на HTML5 и CSS3</title>
	<meta charset="utf-8">
 
	<style>
	.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		display: none;
		pointer-events: none;
	}
 
	.modalDialog:target {
		display: block;
		pointer-events: auto;
	}
 
	.modalDialog > div {
		width: 400px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}
 
	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}
 
	.close:hover { background: #00d9ff; }
	</style>
</head>
 
<body>
 
<a href="#openModal">Открыть модальное окно</a>
 
<div id="openModal" class="modalDialog">
	<div>
		<a href="#close" title="Закрыть" class="close">X</a>
		<p>Содержимое модального окна</p>
	</div>
</div>
 
</body>
</html>

Казалось бы, всё просто, вставляй разное содержимое в разные Виджеты и пользуйся...
Ай нет.
Во втором виджете повторяется копия виджета номер один.

Как научить Виджет различать разное содержимое модальных окон?

#2 26 июня 2017 в 16:21

href="#openModal2"
id="openModal2"

#3 26 июня 2017 в 17:41

href="#openModal2"
id="openModal2"

Нил™

Признателен за ответ.
При этом прошу Вас дать более полное описание, каким образом реализовать это решение? Куда именно вставить этот код.

Сегодня в 20:59

#4 26 июня 2017 в 18:21

А.Саган,
Я не знаю, что куда вставлять в вашем случае, просто есть общее правило, что два блока с одинаковыми id на одной странице не нужно размещать,
если у вас во втором виджете дублируется первый, то очевидно это связано с тем, что на одной странице два блока с одинаковым id
у вас id openModal вот во втором слайдере и нужно присовить ему другое имя.
И возможно, как вариант, если в вашем js скрипте тоже упоминается идентификатор openModal, может быть продублировать функцию задав другое имя для функции и идентификатор. Это не факт что потребуется, смотря как там все устроено. Для начала нужно исключить ситуация когда на одной странице два разных блока с одинаковым id

#5 26 июня 2017 в 18:21

joxi.ru/eAO4kXSxd8XXro вот тут заменить 1 на 2

Прожарки дополнений ► https://iscms.ru Плюшки тут► https://russait.ru ТЕЛЕГА ➤ https://t.me/+E-N1uja-nXgzYzZi

#6 26 июня 2017 в 18:36

joxi.ru/eAO4kXSxd8XXro вот тут заменить 1 на 2

Cтудия Sitestroi

Да, разобрался. В указанных вами местах и ещё в двух, где упоминается modalDialog

#7 26 июня 2017 в 18:52

Да! Отлично.
Скоро программистом станете smile

Прожарки дополнений ► https://iscms.ru Плюшки тут► https://russait.ru ТЕЛЕГА ➤ https://t.me/+E-N1uja-nXgzYzZi

#8 26 июня 2017 в 19:15

Да! Отлично.
Скоро программистом станете

Cтудия Sitestroi

Не льстите. Программистом я не стану — это не моё.
А вот быть Заказчикам у программистов — это ближе.
Вот вам готовая тема для виджета или компонента — "Содержимое в модальном окне"

И чтобы картинки вставлялись и чтобы в любом месте текста была возможность вставить.

Я бы купил!

#9 26 июня 2017 в 19:57

Я бы купил!
А.Саган

Бесплатно возьмёте?

#10 27 июня 2017 в 03:44

Я бы купил!
А.Саган
Бесплатно возьмёте?

Pocus

Пробовал, не работает!

#11 8 июля 2017 в 15:38

Cтудия Sitestroi

И тем не менее хотелось бы получить ответ… мол, да, берёмся за работу или нет, не берёмся.
Если не вы, то кто это может сделать?

#12 8 июля 2017 в 17:12

Пробовал, не работает!
А.Саган

Так может с разработчиком связаться или другими пользователями? "Не работает" — довольно расплывчато звучит…

Вкусные цены на NVME Win-сервера, Компоненты для заработка

#13 16 июля 2017 в 12:02

"Не работает" — довольно расплывчато звучит.
AndroS

Не работает — значит не подаёт признаков жизни, ни заявленный виджет, ни его Автор!

#14 17 июля 2017 в 10:03

"Не работает" — довольно расплывчато звучит.
AndroS
Не работает — значит не подаёт признаков жизни, ни заявленный виджет, ни его Автор!

А.Саган

С автором ладно, а вот с виджетом Вы ошибаетесь, вчера скачали и установили, всё работает, есть проблемы со стилями, так как у нас свой шаблон, но это поправимо. Так что утверждая что не работает, ни чем не аргументируя как то не красиво.

Ulogin и Loginza

Создать удобный выбор категори

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

Содержимое модального окна

Похожие темы

Как сделать фон на высоту экрана с прокруткой только на содержимое сайта

Тип контента Новости. Не работает открытие фото в модальном окне.

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

Выбрать город без выбора области и без модального окна

Инфо тема: - Яндекс, Неканонические страницы в Поиске

[ЕСТЬ РЕШЕНИЕ] Админка: страница 404 при открытии раздела Контент

InstantCMS Team

О проекте

Поддержка

Дополнения