Может кому и пригодится
Столкнулся с проблемой вывода формы обратной связи в виде модального окна,
в общем пересмотрев кучу вариантов в интернете где использовался как Javascript так и css остановился на HTML5 и CSS3.
Прежде всего нужно добавить в ваш файл стилей вот этот стиль:
ну или создать собственный файл со стилями и подключить его в файле template.php вашего шаблона
Затем добавляем вот такой код на то место куда вы планируете вывод модального окна (я прописывал в файле template.php(обратный звонок и написать нам))
вот вариант вывода произвольного текста
Вместо фразы :"Открыть модальное окно" вставляем любой текст ну или изображение(кнопку)
Но так как мне необходимо было вывести форму обратной связи то я прописал в коде новую позицию для вывода модуля, Вот что получилось:
Позицию модуля — в моём случае это zakaz-zvonka прописать необходимо в файле positions.txt вашего шаблона
Затем идём во вкладку модули, создаём модуль, вставляем форму в модуль, указываем позицию модуля для отоброжения — в моём случае это zakaz-zvonka
ставим галочку публиковать модуль на всех страницах, И наслаждаемся проделанной работой.
чисто теоритически таким вот оброзом можно вывести любой модуль в модальном окне, подправив под себя только стиль (ширину окна, ну кому нужно то можно и цвет )
Если необходимо добавить несколько окон модальных то openModal переименовываем к примеру вот так openModal1
Ну и соответственно другую позицию для вывода(чтобы не открывало все модули в прикреплённой позиции )
Я ИСПОЛЬЗОВАЛ 1.10.3 ВЕРСИЮ СИСТЕМЫ НО ДУМАЮ, Что подойдёт под любую
Вот HTML архив с примером реализации работы этого модального окна.
Столкнулся с проблемой вывода формы обратной связи в виде модального окна,
в общем пересмотрев кучу вариантов в интернете где использовался как Javascript так и css остановился на HTML5 и CSS3.
Группе, к которой вы принадлежите, запрещено просматривать этот скрытый текст
Прежде всего нужно добавить в ваш файл стилей вот этот стиль:
.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; }
Затем добавляем вот такой код на то место куда вы планируете вывод модального окна (я прописывал в файле template.php(обратный звонок и написать нам))
вот вариант вывода произвольного текста
<a href="#openModal">Открыть модальное окно</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Закрыть" class="close">X</a> <h2>Модальное окно</h2> <p>Прмер простого модального окна, которое может быть создано с использованием CSS3.</p> <p>Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.</p> </div> </div>
Но так как мне необходимо было вывести форму обратной связи то я прописал в коде новую позицию для вывода модуля, Вот что получилось:
<a href="#openModal">Обратный Звонок</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Закрыть" class="close">X</a> <p><?php $inPage->printModules('zakaz-zvonka'); ?></p> </div> </div>
Затем идём во вкладку модули, создаём модуль, вставляем форму в модуль, указываем позицию модуля для отоброжения — в моём случае это zakaz-zvonka
ставим галочку публиковать модуль на всех страницах, И наслаждаемся проделанной работой.
чисто теоритически таким вот оброзом можно вывести любой модуль в модальном окне, подправив под себя только стиль (ширину окна, ну кому нужно то можно и цвет )
Если необходимо добавить несколько окон модальных то openModal переименовываем к примеру вот так openModal1
<a href="#openModal">Обратный Звонок</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Закрыть" class="close">X</a> <p><?php $inPage->printModules('zakaz-zvonka'); ?></p> </div> </div> <a href="#openModal1">Обратный Звонок</a> <div id="openModal1" class="modalDialog"> <div> <a href="#close" title="Закрыть" class="close">X</a> <p><?php $inPage->printModules('napisite-nam'); ?></p> </div> </div>
Я ИСПОЛЬЗОВАЛ 1.10.3 ВЕРСИЮ СИСТЕМЫ НО ДУМАЮ, Что подойдёт под любую
Вот HTML архив с примером реализации работы этого модального окна.
Реклама #
Капитан 10 лет назад #
prosis 10 лет назад #
letsgo 10 лет назад #
Dim@sik 10 лет назад #
eoleg 10 лет назад #
на мысли!
Dim@sik 10 лет назад #
кажется без ошибок))
Amurland 10 лет назад #
http://instantcms.ru/blogs/voznemozhno/modul-vsplyvayushe-okno.html
на всякий случай. вдруг кто не видел
gaara 10 лет назад #
1 - при нажатии на ссылку страница переместица вверх до конца, если страница опущена на несколько листов вниз, то пользователям будет не приятно, исправляется созданием кнопки на основе дива и придание ему онклика.
2 - я бы сделал плавное появление элементов, тут как я понял используется джей квери, значит можно сделать появление элемента в "красках" =)))
плюсую, но на 5 не тянет =)
Dim@sik 10 лет назад #
gaara 10 лет назад #
Dim@sik 10 лет назад #
В личку скинул демо сайта можете посмотреть,
gaara 10 лет назад #
Dim@sik 10 лет назад #
Критика всегда приветствуется
Майкл 10 лет назад #
Аватар путает мысли
gaara 10 лет назад #
Майкл 10 лет назад #
gaara 10 лет назад #
Евгений Фоменко 10 лет назад #
Использование подобных скриптов без участия jquery - это огромный плюс, особенно для тех, кто берет готовые решения с разными версиями скриптов и потом борется с несовместимостью. Только в инстанте изначально объявлена другая версия - это влияет или нет на работоспособность?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
artscripts 10 лет назад #
Max 10 лет назад #
ph3no 10 лет назад #
Что я делаю не так?
ValeraK 10 лет назад #
ValeraK 10 лет назад #
ValeraK 10 лет назад #