Вариант модального окна на сайте

+47
3.45K
Может кому и пригодится
Столкнулся с проблемой вывода формы обратной связи в виде модального окна,
в общем пересмотрев кучу вариантов в интернете где использовался как Javascript так и css остановился на HTML5 и CSS3.

Группе, к которой вы принадлежите, запрещено просматривать этот скрытый текст

Прежде всего нужно добавить в ваш файл стилей вот этот стиль:
  1.  
  2. .modalDialog {
  3. position: fixed;
  4. font-family: Arial, Helvetica, sans-serif;
  5. top: 0;
  6. right: 0;
  7. bottom: 0;
  8. left: 0;
  9. background: rgba(0,0,0,0.8);
  10. z-index: 99999;
  11. -webkit-transition: opacity 400ms ease-in;
  12. -moz-transition: opacity 400ms ease-in;
  13. transition: opacity 400ms ease-in;
  14. display: none;
  15. pointer-events: none;
  16. }
  17.  
  18. .modalDialog:target {
  19. display: block;
  20. pointer-events: auto;
  21. }
  22.  
  23. .modalDialog > div {
  24. width: 400px;
  25. position: relative;
  26. margin: 10% auto;
  27. padding: 5px 20px 13px 20px;
  28. border-radius: 10px;
  29. background: #fff;
  30. background: -moz-linear-gradient(#fff, #999);
  31. background: -webkit-linear-gradient(#fff, #999);
  32. background: -o-linear-gradient(#fff, #999);
  33. }
  34.  
  35. .close {
  36. background: #606061;
  37. color: #FFFFFF;
  38. line-height: 25px;
  39. position: absolute;
  40. right: -12px;
  41. text-align: center;
  42. top: -10px;
  43. width: 24px;
  44. text-decoration: none;
  45. font-weight: bold;
  46. -webkit-border-radius: 12px;
  47. -moz-border-radius: 12px;
  48. border-radius: 12px;
  49. -moz-box-shadow: 1px 1px 3px #000;
  50. -webkit-box-shadow: 1px 1px 3px #000;
  51. box-shadow: 1px 1px 3px #000;
  52. }
  53.  
  54. .close:hover { background: #00d9ff; }
  55.  
ну или создать собственный файл со стилями и подключить его в файле template.php вашего шаблона
Затем добавляем вот такой код на то место куда вы планируете вывод модального окна (я прописывал в файле template.php(обратный звонок и написать нам))
вот вариант вывода произвольного текста
  1.  
  2. <a href="#openModal">Открыть модальное окно</a>
  3.  
  4. <div id="openModal" class="modalDialog">
  5. <div>
  6. <a href="#close" title="Закрыть" class="close">X</a>
  7. <h2>Модальное окно</h2>
  8. <p>Прмер простого модального окна, которое может быть создано с использованием CSS3.</p>
  9. <p>Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.</p>
  10. </div>
  11. </div>
  12.  
Вместо фразы :"Открыть модальное окно" вставляем любой текст ну или изображение(кнопку)

Но так как мне необходимо было вывести форму обратной связи то я прописал в коде новую позицию для вывода модуля, Вот что получилось:
  1.  
  2. <a href="#openModal">Обратный Звонок</a>
  3. <div id="openModal" class="modalDialog">
  4. <div>
  5. <a href="#close" title="Закрыть" class="close">X</a>
  6. <p><?php $inPage->printModules('zakaz-zvonka'); ?></p>
  7. </div>
  8. </div>
  9.  
Позицию модуля — в моём случае это zakaz-zvonka прописать необходимо в файле positions.txt вашего шаблона
Затем идём во вкладку модули, создаём модуль, вставляем форму в модуль, указываем позицию модуля для отоброжения — в моём случае это zakaz-zvonka
ставим галочку публиковать модуль на всех страницах, И наслаждаемся проделанной работой.
чисто теоритически таким вот оброзом можно вывести любой модуль в модальном окне, подправив под себя только стиль (ширину окна, ну кому нужно то можно и цвет )

Если необходимо добавить несколько окон модальных то openModal переименовываем к примеру вот так openModal1
  1.  
  2. <a href="#openModal">Обратный Звонок</a>
  3. <div id="openModal" class="modalDialog">
  4. <div>
  5. <a href="#close" title="Закрыть" class="close">X</a>
  6. <p><?php $inPage->printModules('zakaz-zvonka'); ?></p>
  7. </div>
  8. </div>
  9.  
  10.  
  11. <a href="#openModal1">Обратный Звонок</a>
  12. <div id="openModal1" class="modalDialog">
  13. <div>
  14. <a href="#close" title="Закрыть" class="close">X</a>
  15. <p><?php $inPage->printModules('napisite-nam'); ?></p>
  16. </div>
  17. </div>
  18.  
Ну и соответственно другую позицию для вывода(чтобы не открывало все модули в прикреплённой позиции )
Я ИСПОЛЬЗОВАЛ 1.10.3 ВЕРСИЮ СИСТЕМЫ НО ДУМАЮ, Что подойдёт под любую
Вот HTML архив с примером реализации работы этого модального окна.
0
Капитан Капитан 10 лет назад #
Спасибо! Возьму к себе в копилку :)
0
prosis prosis 10 лет назад #
окно модАльное!
-2
letsgo letsgo 10 лет назад #
У него модельное) Так круче Ж)
+1
Dim@sik Dim@sik 10 лет назад #
Так это ж в примере так было написано ) - в очередной раз ловлю себя на мысле, что под утро лучше нечего не писать ))))
0
eoleg eoleg 10 лет назад #
scratch
на мысли!
+1
Dim@sik Dim@sik 10 лет назад #
ёлки, палки, не выспался)))
кажется без ошибок))
+5
Amurland Amurland 10 лет назад #
Ссылку оставлю тут
http://instantcms.ru/blogs/voznemozhno/modul-vsplyvayushe-okno.html
на всякий случай. вдруг кто не видел
0
gaara gaara 10 лет назад #
спасибо. на самом деле очень наглядная демонстрация использования модального окна. но есть пара моментов:
1 - при нажатии на ссылку страница переместица вверх до конца, если страница опущена на несколько листов вниз, то пользователям будет не приятно, исправляется созданием кнопки на основе дива и придание ему онклика.
2 - я бы сделал плавное появление элементов, тут как я понял используется джей квери, значит можно сделать появление элемента в "красках" =)))

плюсую, но на 5 не тянет =)
0
Dim@sik Dim@sik 10 лет назад #
В моём варианте это находится в шапке сайта, поэтому я этого не замечал, нет здесь используется html5 + css
0
gaara gaara 10 лет назад #
тогда на счет второго пункта извините.. но первый не упускайте из вида, да и правильнее это будет.. не подумайте что придираюсь..
0
Dim@sik Dim@sik 10 лет назад #
Только что проверил, сделал вывод модельного окна с футера , так в верх страницы не перекидывает, странно что у вас так
В личку скинул демо сайта можете посмотреть,
-3
gaara gaara 10 лет назад #
вижу все-таки вы огорчились, но без обид - конструкцию с ссылкой в решотку плохой тон
0
Dim@sik Dim@sik 10 лет назад #
да нет несколько не огорчился, я поделился реализацией ,
Критика всегда приветствуется
+3
Майкл Майкл 10 лет назад #
Прстите за нескомный вопрос Вы "ж" или "м"
Аватар путает мысли
-7
gaara gaara 10 лет назад #
а есть разница ? для м и ж у вас разные ответы ? так зачем спрашивать ?
+1
Майкл Майкл 10 лет назад #
Хотелось бы вместо вместо обезличеноого "Вы", обратиться "молодой человек" или "девушка")
-5
gaara gaara 10 лет назад #
хз, обращайся например Максим, только что это изменит ? отношение к пользователям ? наврятли.. темы как удаляли так и удаляют админы, даже на личку не отвечают.. =)))) хз, какого вообще просят представиться, если такая анархия ?
0
Евгений Фоменко Евгений Фоменко 10 лет назад #
"я бы сделал" - он "м".
Использование подобных скриптов без участия jquery - это огромный плюс, особенно для тех, кто берет готовые решения с разными версиями скриптов и потом борется с несовместимостью. Только в инстанте изначально объявлена другая версия - это влияет или нет на работоспособность?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">;
+1
artscripts artscripts 10 лет назад #
Чтобы не было вопросов за, что минусы в комментариях, отвечу за себя. Ставил за идею + в коментах ставил минус. Так как пафос ответов не то, что не радует, просто огорчает.
0
Max Max 10 лет назад #
Спасибо Дмитрию за готовое решение, сегодня как раз понадобилось такое окошко.
0
ph3no ph3no 10 лет назад #
Попробовал повторить, в модальном окне появляется только printModules('zakaz-zvonka'); ?>
Что я делаю не так?
0
ValeraK ValeraK 9 лет назад #
используйте конструкцию {php} cmsModule('zakaz-zvonka') {/php} Актуально только для 1.10.3 и ниже
0
ValeraK ValeraK 9 лет назад #
Очень интересно, можно ли данным способом вывести компонент?
0
ValeraK ValeraK 9 лет назад #
вернее шаблон компонента

Еще от автора

Обновление Изображение категории и описание категории + Включение/Отключение категории
Обновил Вот это до версии 2.7.1 И добавил включение отключение категории
Изображение категории и описание категории
Дополнительное изображение категории и описание категории
Мульти фото в статьи + иконка категории для версии 1.10.6
В продолжение Зтого и этого обьединил эти 2 разработки в одно целое .
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.