Yii: Выводим модальное окно (быстрая форма обратной связи) на CJuiDialog
C помощью CJuiDialog можно придать дополнительной функциональности любому сайту, а в Yii Framework это сделать особенно удобно, так как jQuery уже встроен в Yii. Диалоговые окна на сайте позволяют вывести, например, форму заказа обратного звонка, или форму отправки сообщения администратору сайта без перехода на отдельную страницу. Для создания модальных (или диалоговых) окон в Yii есть удобный класс – CJuiDialog. Это окна, открывающиеся с помощью jQuery, когда посетитель сделает определённое вами действие, например, нажмёт по ссылке "Отправить заявку".

Покажу как сделал вывод такого окна у нас на loco.ru. Хочется сказать спасибо Белякову Юрию за внятную статью Yii - Использование CJuiDialog для создания модальных окон. Я лишь конкретизирую её и дополню подключением стилей оформления формы в модальном окне для моего случая.
Итак, создаю модель /models/QuickForm.php
<?php
class QuickForm extends CFormModel
{
public $name;
public $email;
public $phone;
public $message;
public function rules()
{
return array(
array('name, email, message', 'required'),
array('phone', 'safe'),
);
}
public function attributeLabels()
{
return array(
'name'=>'Ваше имя',
'phone'=>'Телефон',
'email'=>'Email',
'message'=>'Опишите задачу',
);
}
}
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id' => 'mydialog',
'options' => array(
'title' => 'Отправить сообщение',
'autoOpen' => false,
'modal' => true,
'resizable'=> false,
),
));
$qForm = new QuickForm;
$form = $this->beginWidget('CActiveForm', array(
'id' => 'quick-form',
'enableClientValidation' => true,
'clientOptions' => array(
'validateOnSubmit' => true,
),
'htmlOptions'=>array(
'class'=>'form',
),
'action' => array('site/quick'), // когда форма показывается и в других контроллерах, не только 'site', то я в каждый из этих контроллеров вставил actionQuick, a здесь указал — array('quick'); почему-то не получается с array('//site/quick')
));
?>
<?php echo $form->errorSummary($qForm); ?>
<?php echo $form->labelEx($qForm,'name'); ?>
<?php echo $form->textField($qForm,'name', array('size'=>30)); ?>
<?php echo $form->error($qForm,'name'); ?>
<?php echo $form->labelEx($qForm,'email'); ?>
<?php echo $form->textField($qForm,'email', array('size'=>30)); ?>
<?php echo $form->error($qForm,'email'); ?>
<?php echo $form->labelEx($qForm,'phone'); ?>
<?php echo $form->textField($qForm,'phone', array('size'=>30)); ?>
<?php echo $form->error($qForm,'phone'); ?>
<?php echo $form->labelEx($qForm,'message'); ?>
<?php echo $form->textArea($qForm,'message',array('rows'=>6, 'cols'=>31)); ?>
<?php echo $form->error($qForm,'message'); ?>
<?php echo CHtml::submitButton('Отправить'); ?>
<?php $this->endWidget();
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
public function actionQuick() {
$model=new QuickForm;
$model->attributes=$_POST['QuickForm'];
if($model->validate()) {
$headers="From: $model->email\r\nReply-To: $model->email";
$body = "\n\nОтправитель: ".$model->name."\t Телефон: ".$model->phone."\t Email: ".$model->email."\t Задача: ".$model->message;
mail(Yii::app()->params['adminEmail'],'Письмо с сайта loco.ru от'.$model->name, $body, $headers);
}
$this->redirect(array('site/index'));
}
<?php echo CHtml::link('Отправить заявку на разработку интернет сайта', '#', array(
'onclick'=>'$("#mydialog").dialog("open"); return false;',
'class'=>'g-button g-button-orange',
'title'=>'Отправить заявку на разработку интернет сайта',
));?>
Позиционирование CJuiDialog Опция 'position'.
'options' => array(
'title' => 'Отправить сообщение',
'autoOpen' => false,
'modal' => true,
'resizable'=> false,
'position'=> '{ my: "left top", at: "left bottom", of: button }',
),
...
'onclick'=>'$("#mydialog").dialog("option", "position", "left").dialog("open"); return false;',
...
Вывод пользователю сообщения об успешной отправке его заявки.
Создаём представление /views/_dialog.php
<?php
if($flashes = Yii::app()->user->getFlashes()) {
foreach($flashes as $key => $message) {
if($key != 'counters') {
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>$key,
'options'=>array(
'show' => 'blind',
'hide' => 'explode',
'modal' => 'true',
'title' => $message['title'],
'autoOpen'=>true,
'dialogClass'=>$message['type'],
'buttons'=>array('Закрыть'=>'js:function() {$(this).dialog("close");}'),
'close'=>'js:function(e,ui){
$(this).dialog("destroy").remove();
}',
),
'htmlOptions'=>array(
'class'=>'flash-success',
),
));
printf('<span class="dialog">%s</span>', $message['content']);
$this->endWidget('zii.widgets.jui.CJuiDialog');
}
}
}
/models/Dialog.php
<?php
class Dialog {
public static function Message($type, $title, $message, $id = 0) {
if($id == 0)
$id = rand(1, 999999);
Yii::app()->user->setflash($id, array('type'=>$type,'title' => $title, 'content' => $message) );
}
}
?>
<?php $this->renderPartial('//site/_dialog'); ?>
<?php echo $content; ?>
Dialog::message('flash-success', 'Отправлено!', 'Спасибо, '.$model->name.'! Ваше письмо отправлено!');
//Yii::app()->user->setFlash('messageSent', 'Спасибо, '.$model->name.'! Ваше письмо отправлено!');
$this->redirect($model->current_url);
Автоматическое закрытие диалогового окна CJuiDialog в Yii после 5 секунд.
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'dialogbox',
// additional javascript options for the dialog plugin
'options'=>array(
'title'=>'Dialog box 1',
'autoOpen'=>true,
'open' => 'js:function(event, ui) {
setTimeout(function() {
$("#dialogbox").dialog("close");
}, 5000);
}',
),
));
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- Yii: Как выводить несколько значений в поле CGridView, которое хранит строку id's. Вывод массива в CGridView. (13.05.2013)
- Yii: Поиск и сортировка по полю из присоединённой таблицы в CGridView (18.04.2013)
- 2 Yii + Git (github) на Mac. (24.03.2013)
- Настройка PhpStorm для работы с Yii (24.02.2013)
- Yii: Разбираемся с расширением newtinymce + elfinder от Bogdan Savluk (z_bodya) (06.02.2013)
- Yii: Как в крошки (breadcrumbs) добавить категорию, к которой относится материал или статья (19.01.2013)
- DHTMLX и Yii: как использовать условия в выборке из базы данных. (02.01.2013)
- Yii: Выводим модальное окно (быстрая форма обратной связи) на CJuiDialog (30.01.2013) ← вы тут
- ВОПРОС: Как делается отдельная форма авторизации админа, чтобы заходишь сайт/admin и вылазила форма? (11.12.2012)
- 4 Курс по Yii с нуля. Урок 4. Дорабатываем простую работу с пользователями: хранение пароля при редактировании пользователя. (13.04.2013)
- Yii: Что можно сделать с листалкой Yii pager в CListView и CGridView? (02.11.2012)
- Yii: Транслитерация URL-адреса (автоматическое создание псевдонима для url из заголовка) (29.10.2012)
- 3 Курс по Yii с нуля. Урок 3. Создаём новых пользователей. Организуем простую систему авторизации. Аутентификация, пароли, соли. (10.03.2013)
- Yii: Как передать переменную в шаблон (layout) из контроллера? (26.10.2012)
- Yii: Автокомплит CJuiAutoComplete для выбора значения поля из другой модели и добавления этого значения в поле (25.10.2012)
- 2 Курс по Yii с нуля. Урок 2. Переносим и настраиваем Yii и проект нашего сайта на рабочем сервере. (10.03.2013)
- Yii User + Rights: Не работает редактирование пользователем (не админом!) данных своего профиля (25.10.2012)
- Yii: Как задавать стили css (class, id) для CMenu, пунктов меню и ссылок в меню. (16.03.2013)
- Yii: Как использовать IF в CDbCriteria в MySQL запросе select в контроллере (24.09.2012)
- Yii: Делаем поиск по сайту, используя Zend Lucene (04.06.2012)
- YiiConf 2012 (Киев 19 мая) - Yii 2. Что нового? (03.06.2012)
- Расширение zii-image-column (EImageColumn) для отображения изображений в CGridView (04.06.2012)
- Yii: Добавляем ввод даты с помощью CJuiDatePicker (11.05.2012)
- YiiTalk - эпизод 6: Виталий Родненко (webpp.ru, codeisart.ru) (11.05.2012)
- YiiTalk - эпизод 5: Андрей Опейкин (yupe.ru) (11.05.2012)
1 комментарий
Leave a Comment