Yii 1.1: Popup AJAX DialogBox without any extension


In this wiki I explain how to show a default popup dialogbox (like Gii does) using an existing module.

You can use any module or component or library that includes fancybox jquery library.

In this example we will use the Gii generated jquery and css but you can use any other that includes the jquery.fancybox-1.3.1.pack.js and jquery.fancybox-1.3.1.css files.

So, In your view add this (for example in views/controllerA/testPopup.php)

$cs = Yii::app()->clientScript;
$cs->coreScriptPosition = CClientScript::POS_HEAD;
$cs->scriptMap = array();
$baseUrl = Yii::app()->getModule('gii')->assetsUrl; //the assets of existing module 
$cs->registerScriptFile($baseUrl . '/js/fancybox/jquery.fancybox-1.3.1.pack.js'); 
$cs->registerCssFile($baseUrl . '/js/fancybox/jquery.fancybox-1.3.1.css');
$cs->registerScriptFile(Yii::app()->request->baseUrl . '/js/popup.js');
echo "<div id='your-form-block-id'>";
echo CHtml::beginForm();
echo CHtml::link('an ajax test', array('controllerA/textA'), array('class' => 'class-link'));
echo CHtml::endForm();
echo "</div>";

In protected folder , create (if it is not exists) js folder and a file with name popup.js

$(document).ready(function() {
    $('.class-link').click(function() {
        var title = $(this).attr('rel');
            type: 'POST',
            cache: false,
            url: $(this).attr('href'),
            data: $('#your-form-block-id form').serializeArray(),
            success: function(data) {
                $.fancybox(data, {
                    'title': title,
                    'titlePosition': 'inside',
                    'titleFormat': function(title, currentArray, currentIndex, currentOpts) {
                        return '<div id="tip7-title"><span><a href="javascript:;" onclick="$.fancybox.close();">close</a></span>' + (title && title.length ? '<b>' + title + '</b>' : '') + '</div>';
                    'showCloseButton': false,
                    'autoDimensions': false,
                    'width': 900,
                    'height': 'auto',
                    'onComplete': function() {
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                $.fancybox('<div class="error">' + XMLHttpRequest.responseText + '</div>');
        return false;
    $(document).on('click', '#fancybox-inner .close-code', function() {
        return false;

In your controllerA create the actions textA and TestPopUp

public function actionTextA() {
        if (!Yii::app()->request->isAjaxRequest)
        else {
    public function actionTestPopUp() {

It is done! Now you have the desired functionality

Note: Parts of code already been written in Gii Yii module

Total 4 comments

#13803 report it
Kostas Apazidis (KonApaz) at 2013/06/27 10:58am
Bug using Gii module


in this line $baseUrl = Yii::app()->getModule('gii')->assetsUrl; Gii will be loaded and the assetsUrl will be returned in $baseUrl

Unfortunately, there are cases that gii may modify attributes of Yii:app()->user.

So it is not preferable to use the above line to get the url foreach user request

The solution is: Executing the line at the first request, store the baseurl in database (with or not caching system) and use the stored variable on the second or above request

#13798 report it
Kostas Apazidis (KonApaz) at 2013/06/26 06:04pm
About CGridview

If you want this functionality for each row of specified column you have to just add this code

array('class'=>'CLinkColumn', 'urlExpression'=>'Yii::app()->createUrl("controllerA/actionA",array("var"=>$data->var))', 'htmlOptions' => array('class' => 'class-link')),
#13796 report it
Kostas Apazidis (KonApaz) at 2013/06/26 11:56am
your-form-block-id as parameter


You could generate the js code by php, So

Insead of $cs->registerScriptFile(Yii::app()->request->baseUrl . '/js/popup.js'); you could use $cs->registerScript("entire javascript code... with parameter from php");

the text could be generated by php, so you can do anything you want!

Also there is a better way to do that replacing $('#your-form-block-id form') with $(myvar1)

add also $cs->registerScript('globalvariable','var myvar1='.$phpcodevar);

If you want multiple selectors at once please post me a message to make an extension :)

#13791 report it
zvik2004 at 2013/06/26 08:48am
Make your-form-block-id a parameter


I'm not that familiar with js;
Is there a way to pass the 'your-form-block-id' to the popup.js as a parameter (otherwise I guess I need a different popup.js for each form)?


Leave a comment

Please to leave your comment.

Write new article