Форум русской поддержки Joomla!® CMS
10.12.2016, 01:20:31 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 1724 раз)
0 Пользователей и 1 Гость смотрят эту тему.
WinSSLioN
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 128



« : 20.06.2015, 23:58:24 »

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

Используем:

- 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, 14:44:13 от WinSSLioN » Записан
Lordon
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 16


« Ответ #1 : 09.10.2015, 23:18:47 »

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

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #2 : 10.10.2015, 08:42:20 »

- CSS
- simpleForm2
- Modules Anywhere

CSS можно и адван модуль и не надо симпл этот, я тоже против него, он какой то заумно покарябенный.
а идея хорошая и спасибо за труд ваш.
Записан
kik84
Живу я здесь
******

Репутация: +59/-4
Offline Offline

Сообщений: 1307



« Ответ #3 : 10.10.2015, 09:58:12 »

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

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #4 : 10.10.2015, 09:59:40 »

адвансе модуль и прикрепить в движок.
если нету, дам, офф сайт есть про него.
про алтернативу, так инклуде проще и свою всплывашку.
симпл гониво, рсформ и то лучше
Записан
brondex
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 4


« Ответ #5 : 29.01.2016, 17:34:25 »

Красавей! Оценил и все работает)
Записан
staticlight
Живу я здесь
******

Репутация: +65/-0
Offline Offline

Пол: Мужской
Сообщений: 1090


Staticlight


« Ответ #6 : 14.04.2016, 11:31:10 »

Недавно столкнулся с проблемой поиска решения (выводим модуль с формой обратной связи в 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, 11:37:13 от staticlight » Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet