Форма обратной связи во всплывающем окне

  • 6 Ответов
  • 2881 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

WinSSLioN

Реализация формы обратной связи во всплывающем окне

Используем:

- CSS
- simpleForm2
- Modules Anywhere

Заранее скажу, что многие посчитают что не интересно устанавливать дополнительный модули и плагины, НО, оба эти дополнения полезны и не помешают никому, тот же simpleForm2 в любом случаи понадобится, а Modules Anywhere очень полезен для гибкой настройки модулей на странице..


Последовность действий:

1. Для начала нам нужно сделать так что бы можно было показывать информацию во всплывающем окне без плагинов..
  
     Приведенный ниже код вставляем в модуль HTML текст и публикуем куда нибуть на сайте, данный текст будет в виде кнопки.
   
   
Код
	
<p><a href="#openModal" target="" class="btn btn-primary report-button">Название кнопки</a></p>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" class="right-position" title="Закрыть"><img src="images/system/close.png"></a></p>
<h2 style="text-align: center;">Заголовок</h2>
<p>&nbsp;</p>
<p>Текст вместо которого мы потом вставим форму обратной связи</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>

    В папку закидываем изображение для кнопки закрытия окна, по вкусу но размер должен быть где то 25x25px с расщирением .png  images/system/close.png

2. Далее подключаем стили CSS для окна и кнопки вызова этого самого окна.

   В файл custom.css вставляем стили:
  
  
  
Код
 /* Стили модального окна
----------------------------------------------------------------------------------------------------*/

.modalDialog {

position: fixed;

font-family: Arial, Helvetica, sans-serif;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: rgba(0, 0, 0, 0.47);

z-index: 99999;

opacity:0;

-webkit-transition: opacity 400ms ease-in;

-moz-transition: opacity 400ms ease-in;

transition: opacity 400ms ease-in;

pointer-events: none;

}

.modalDialog:target {

opacity:1;

pointer-events: auto;

}

.modalDialog > div {

width: 500px;

position: relative;

margin: 2% auto;

padding: 25px 50px 25px 50px;

border-radius: 3px;

background: #fff;

}

.close-dailog {

padding-left: 50%;

font-size: 20px;

font-weight: bold;

line-height: 20px;

color: #000;

text-shadow: 0 1px 0 #ffffff;

opacity: 0.2;

}

.close-dialog-button {

margin-left: 175px;

color: #fff;

background-color: #016da9;

border: 1px solid #016da9;

font-size: 16px;

padding: 8px 40px;

cursor: pointer;
}

.open-dialog-button {

vertical-align: 0;

color: #0070FF;

font-size: 13px;

display: inline-block;

}

.open-dialog-botton-blue {

margin-top: 6px;

color: #fff;

background-color: #008CDA;

border: 1px solid #008CDA;

padding: 3px 9px;

cursor: pointer;
}

.open-dialog-text-botton {
color: #797979;
}

  
  
    /* Конец стилей модального окна
----------------------------------------------------------------------------------------------------*/

Теперь модуль с HTML текстом будет отображен как кнопка при нажатии которой будет показано модальное окно.

3. Устанавливаем плагин Modules Anywhere который даст возможность вставлять модули в материал.

4. Теперь устанавливаем simpleForm2 при помощи которого и создадим ту самую форму обратной связи.

5. Создаем в менеджере модулей модуль simpleForm2, и настраиваем его.

6. Заходим в модуль с HTML кодом который мы создали ранее, находим под визуальным редактором кнопку Insert Module, нажимаем и выбираем модуль simpleForm2. В материале появится шорт код {module simpleForm2}  и вместо "Текст вместо которого мы потом вставим форму обратной связи" вставляем данный код.

Готово, теперь форма будет появлятся в модальном окне при нажатии кнопки.
  
P.S. CSS нашел в интернете, вот уж не помню где, но автор молодец..
« Последнее редактирование: 22.06.2015, 15:44:13 от WinSSLioN »
С уважением, Николай

*

Lordon

я до сих пор ищу, пока не нашел варианта
этот simpleForm2 не рекомендую
я его когда то устанавливал, у меня появилось около 30 страниц в индексе с simpleForm2. Потом удалял долго

*

vipiusss

  • ********
  • 5461
  • [+]327 / [-]10
  • JoomlaNet
- CSS
- simpleForm2
- Modules Anywhere

CSS можно и адван модуль и не надо симпл этот, я тоже против него, он какой то заумно покарябенный.
а идея хорошая и спасибо за труд ваш.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

kik84

CSS можно и адван модуль и не надо симпл этот
Что такое адван?) И какая есть альтернатива симле с аналогичным функционалом?

*

vipiusss

  • ********
  • 5461
  • [+]327 / [-]10
  • JoomlaNet
адвансе модуль и прикрепить в движок.
если нету, дам, офф сайт есть про него.
про алтернативу, так инклуде проще и свою всплывашку.
симпл гониво, рсформ и то лучше
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

Красавей! Оценил и все работает)

*

staticlight

  • ******
  • 1090
  • [+]65 / [-]0
  • Staticlight
Недавно столкнулся с проблемой поиска решения (выводим модуль с формой обратной связи в popup).
Компонент форм  - QuickForm
Modals от NN не заработали, а их форум, на котором жаловались на похожую проблему, закрыли на время переделки сайта.
Лень было возиться с урезанными шаблонами, поэтому в итоге, рабочее решение было найдено.

Решение на CSS3 и HTML5, так что будет работать не везде.

Мб кому-нибудь будет полезно.

Код

<style>
/*Убираете данный код в файлы CSS*/
.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;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog:target {
opacity:1;
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;

}
/* Стили modalbutton сгенерированы в CSS3 button generatorЕ */
.modalbutton {background: #42d934;
  background-image: -webkit-linear-gradient(top, #42d934, #0c800f);
  background-image: -moz-linear-gradient(top, #42d934, #0c800f);
  background-image: -ms-linear-gradient(top, #42d934, #0c800f);
  background-image: -o-linear-gradient(top, #42d934, #0c800f);
  background-image: linear-gradient(to bottom, #42d934, #0c800f);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff !important;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;}

.modalbutton:hover {
  background: #3382c4;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.close:hover { background: #00d9ff; }
</style>

В тексте материала:

<a class="modalbutton" href="#openModal">ЗАКАЗАТЬ</a>

<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>Сделайте заказ, заполнив поля ниже:</h2>
<p>{QuickForm id=1}</p>

</div>
</div>

« Последнее редактирование: 14.04.2016, 12:37:13 от staticlight »
Руководитель отдела сервисного обслуживания систем безопасности.
Устали от com_content - поставьте com_k2.
TRIPLE "F" POWER: Firefox+FireShot+Firebug. Chrome + Ctrl+Shift+I