YiiBootstrap. Форма входа на сайт в модальном окне.

Обсуждение документации. Переводы Cookbook и авторские рецепты.
Ответить
Alexkhovich
Сообщения: 4
Зарегистрирован: 2012.11.02, 23:27
Откуда: Беларусь, Минская область, Молодечно
Контактная информация:

YiiBootstrap. Форма входа на сайт в модальном окне.

Сообщение Alexkhovich »

Рассмотрим создание формы входа на сайт в модальном окне, при использовании дополнения YiiBooster.
YiiBooster - разработка команды CleverTech, сочетающая в себе YiiBootsrap (интерпретация популярного css-фреймворка под Yii) и YiiBoilerplate. Виджет модальных окон TbModal позволяет достаточно просто создавать их на своем сайте.
Предполагается, что форма логина доступна с любой страницы сайта, поэтому добавление кода будем осуществлять в слой main отображения (protected/views/layouts/main.php). Код подключения виджета и создания формы входа:

Код: Выделить всё

<?php
    //Подключаем виджет модального окна
    $this->beginWidget('bootstrap.widgets.TbModal', array(
            'id'=>'loginModalForm',
            'htmlOptions'=>array(
                 'style'=>'display: none;',  //скрываем модальное окно в неактивном состоянии, исключая возможное перекрытие с другими элементами страницы
            ),
     ));
        //модель формы входа и виджет формы
        $model = new LoginForm;
        $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
            'id'=>'login-form',
            'action'=>$this->createAbsoluteUrl('/site/login'),
            'enableAjaxValidation' => true,  // активируем ajax-валидацию, при ошибках ввода логина/пароля - ошибка будет отображаться в нашем модальном окне
            'enableClientValidation'=>true,
            'clientOptions' => array(
                'validateOnSubmit' => true,
                'validateOnChange' => false,
            ),
            'htmlOptions'=>array(),
        ));
?>
<!-- заголовок модального окна -->
<div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h4>Вход на сайт</h4>
</div>
<!-- тело модального окна, выводим элементы формы -->
<div class="modal-body">
    <?php
        //Элементы формы
     echo $form->textFieldRow($model, 'username', array('class'=>'span3'));
     echo $form->passwordFieldRow($model, 'password', array('class'=>'span3'));
     echo $form->checkboxRow($model, 'rememberMe');
    ?>
</div>
<!-- подвал формы, где выводятся кнопки отправки формы и закрытия модального окна -->
<div class="modal-footer">
    <?php
        $this->widget('bootstrap.widgets.TbButton', array(
            'buttonType'=>'submit',
            'label'=>'Вход',
        ));
    ?>
    <?php
        $this->widget('bootstrap.widgets.TbButton', array(
            'label'=>'Закрыть',
            'htmlOptions'=>array('data-dismiss'=>'modal'),
        ));
    ?>
</div>

<?php
    $this->endWidget();
    $this->endWidget();
?>
Теперь необходимо создать ссылку на активацию окна (protected/views/layouts/main.php):

Код: Выделить всё

<?php
        // проверка, является ли пользователь гостем
        if (Yii::app()->user->isGuest) {
            echo CHtml::link(
                'Вход',
                array('site/login'),
                array(
                    'data-toggle'=>'modal',
                    'data-target'=>'#loginModalForm',
                )
            );
        } else {
            echo CHtml::link('Выход', $this->createAbsoluteUrl('/site/logout'));
        }
        ?>
После клика на "Вход" модальное окно с формой входа появится на экране.
В случае, если Вами используется виджет TbNavbar для отображения главного меню сайта (protected/views/layouts/main.php), в котором есть ссылка на страницу входа, немного изменим его:

Код: Выделить всё

<?php
    // Главное меню
    $this->widget('bootstrap.widgets.TbNavbar', array(
        'brand' => 'Title',
        'fixed' => 'top',
        'collapse'=>true,
        'items' => array(
            array(
                'class' => 'bootstrap.widgets.TbMenu',
                'items' => array(
                    array('label'=>'Home', 'url'=>array('/site/index')),
                    array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
                    array('label'=>'Contact', 'url'=>array('/site/contact')),
                    //изменяем элемент массива 'url' и добавляем  'itemOptions'=>array('data-toggle'=>'modal', 'data-target'=>'#loginModalForm')
                    array('label'=>'Login', 'url'=>'#', 'visible'=>Yii::app()->user->isGuest, 'itemOptions'=>array('data-toggle'=>'modal', 'data-target'=>'#loginModalForm')), 
                    array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest),
                )
            ),

        )
    ));
    ?>
Вид окна:
Изображение
Изображение
Последний раз редактировалось Alexkhovich 2013.01.30, 09:15, всего редактировалось 1 раз.
Alexkhovich
Сообщения: 4
Зарегистрирован: 2012.11.02, 23:27
Откуда: Беларусь, Минская область, Молодечно
Контактная информация:

Re: YiiBootstrap. Форма входа на сайт в модальном окне.

Сообщение Alexkhovich »

Поправил подключение виджета модального окна, добавив

Код: Выделить всё

'style'=>'display: none;' 
, что исключает возможное перекрытие окна (когда оно не активно) с другими элементами страницы

Код: Выделить всё

<?php
    //Подключаем виджет модального окна
    $this->beginWidget('bootstrap.widgets.TbModal', array(
            'id'=>'loginModalForm',
            'htmlOptions'=>array(
                 'style'=>'display: none;',  //скрываем модальное окно в неактивном состоянии, исключая возможное перекрытие с другими элементами страницы
            ),
     ));
    ...
 
cony
Сообщения: 2
Зарегистрирован: 2013.02.18, 16:39

Re: YiiBootstrap. Форма входа на сайт в модальном окне.

Сообщение cony »

Пробовал сделать сам, не работало как надо. С вашим рецептом всё ок! Спасибр!
Аватара пользователя
lancecoder
Сообщения: 2532
Зарегистрирован: 2012.06.26, 17:16

Re: YiiBootstrap. Форма входа на сайт в модальном окне.

Сообщение lancecoder »

1. csrf включен?
2. логика в представлении?
frazelli
Сообщения: 54
Зарегистрирован: 2013.04.20, 07:38

Re: YiiBootstrap. Форма входа на сайт в модальном окне.

Сообщение frazelli »

Подскажите пожалуйста, как изменить появление модального окна? По умолчанию стоит выпад сверху, нужно заменить на fade.
rak
Сообщения: 2181
Зарегистрирован: 2010.11.02, 23:40
Контактная информация:

Re: YiiBootstrap. Форма входа на сайт в модальном окне.

Сообщение rak »

frazelli писал(а):Подскажите пожалуйста, как изменить появление модального окна? По умолчанию стоит выпад сверху, нужно заменить на fade.
http://jsfiddle.net/HdVyn/140/
Аватара пользователя
Серёга
Сообщения: 41
Зарегистрирован: 2013.08.02, 10:15

Re: YiiBootstrap. Форма входа на сайт в модальном окне.

Сообщение Серёга »

Добрый день, подскажите пожалуйста что я делаю не так, прежде установил элиас в конфиге приложения

Код: Выделить всё

Yii::setPathOfAlias('bootstrap', dirname(__FILE__) . '/../extensions/bootstrap'); 
где был бустап он подключился, после чего коды из вашего рецепта скопировал в main.php, пытаюсь зайти на логин отображает мою обычную форму, я понимаю что рендерю представление моего логина, подскажите как правильно изменить действие логин контроллера?
erum
Сообщения: 1
Зарегистрирован: 2013.11.28, 10:42

Re: YiiBootstrap. Форма входа на сайт в модальном окне.

Сообщение erum »

I understand you correctly - you're on the fly - cut image, change the quality and sculpt her watermark? Before giving a poor image to the client, patiently waiting until you finish?
Аватара пользователя
mogilka
Сообщения: 21
Зарегистрирован: 2013.01.19, 12:43
Откуда: Казахстан, Алматы
Контактная информация:

Re: YiiBootstrap. Форма входа на сайт в модальном окне.

Сообщение mogilka »

Не очень понятно, как осуществляется валидация значений? И как избавиться от кнопки "Закрыть", чтоб при успешной валидации диалог сам закрывался?
Ответить