Popup/dialog window on visit

Hello all

On my page i want users to get a popup/dialog window the first time they visit the homepage…

On the website i already got lots of well working dialog modal boxes working - these are opened with a link…

I have used following tutorial for this: http://www.yiiframework.com/wiki/269/how-to-insert-a-simple-dialog-box/

Now when i need the system to automaticly make a dialog window, if first time on the page, i dont really know how to handle this…

I thinking it’s maybe something that should be done in javascript? But im not that familar in that language…

Does anyone got some code’s i maybe could get my hands on, show me links to something similar og just point me in the right direction for a solution…

Thanks a lot

// Casper

No one who can point me in the right direction? :confused:

Hi,

if all you need is just simple dialog, without any iframes in it, then IMO the simplest way to do it is the following:

controller action part:




public function actionIndex() {

	...


	$cookies = Yii::app()->request->getCookies();

	$showDialog = false;//whether to show the dialog

	if ( !$cookies['dialogShown'] ) {

		$showDialog = true;

		$cookies['dialogShown'] = 1;

	}


	$this->render('index', array(

		...,

		'showDialog'=>$showDialog,

	));

}



view file part:




<?php

	if ( $showDialog ) {

		$this->beginWidget('zii.widgets.jui.CJuiDialog', array(

			'id'=>'mydialog',

			// additional javascript options for the dialog plugin

			'options'=>array(

				'title'=>'Dialog box 1',

			),

		));

	}

?>


Dialog content here.


<?php 

	if ( $showDialog ) {

		$this->endWidget('zii.widgets.jui.CJuiDialog');

	}

?>


...




Thanks a lot for your reply MadAnd

I think the dialog need to be with an iframe…

The reason for the popup/dialog window, is that i want my users to be able to add their email to my system.

The “system” itself, is no problem for me… It’s just how to “load” my dialog window the first time (and as you point out, i can use cookies to make sure they only get the popup window once)…

And as i wrote, i have used the solution from: http://www.yiiframework.com/wiki/269/how-to-insert-a-simple-dialog-box/ to my popups…

In that script, they use following when opening a popup:


echo "\t<div class='$iconClass' 

                onclick=\"{ $('#$dialogName').dialog('open');

                $timer(); // lanza el timer creado mas abajo

            }\"></div>\n";

So i guess, in some way i need to get the controller to do that automaticly instead of via a link…

// Casper

Hmm… I might have found a "hack" to do this…


<?php

$this->beginWidget('zii.widgets.jui.CJuiDialog', array( // the dialog

    'id'=>'dialogIntro',

    'options'=>array(

        'title'=>'Intro',

        'autoOpen'=>true,

        'modal'=>true,

        'width'=>550,

        'height'=>470,

    ),

));?>

<iframe value="0" style="width: 100%;" title="response" class="iframeDialog" id="iframeshowIntroDialog" frameborder="0" scrolling="no" src="/site/popup"></iframe>

 

<?php $this->endWidget();?>

and that links to a controller that looks something like this:


public function actionPopup()

	{

		$model=new PopupModel;

			

	    if(isset($_POST['PopupModel']))

	    {

	        $model->attributes=$_POST['PopupModel'];

	        if($model->validate())

	        {

	            // form inputs are valid, do something here

	            $model->save();

							

	        }

	    }

	    $this->layout = "//layouts/dialoglayout";

	    $this->render('popup',array(

			'model'=>$model,

		));

	}

It works the way that it creates new emails in my database…

The only thing i need, is the dialog/popup window to close after it has created the email in the database…

How do i do this?

Popup could be closed in the following way:




public function actionPopup()

{

	$model=new PopupModel;


	if(isset($_POST['PopupModel']))

	{

		$model->attributes=$_POST['PopupModel'];

		if($model->save())

		{

			// form inputs are valid, do something here

			Yii::app()->clientScript->registerScript('close-popup', '$("#dialogIntro", window.parent.document).dialog( "close" );');

		}

	}

	$this->layout = "//layouts/dialoglayout";

	$this->render('popup',array(

		'model'=>$model,

	));

}



Please also note that if you call $model->save(), it implies the call of $model->validate(), thus the following two constructs do the same:




if($model->save())

{

	// form inputs are valid, do something here

}






if ($model->validate())

{

	$model->save(false);

	// form inputs are valid, do something here

}



Please refer to CActiveRecord::save() documentation for the reference.

Again thanks for your quick response…

I’m getting following error with your dialog close code:


JavaScript TypeError

Object [object Object] has no method 'dialog'

http://localhost/site/intro:42

I have posted some of the source-code to…

Line 42 is the line with “$(’#popup-form’).yiiactiveform({‘validateOnSubmit’:true,‘attributes’:”


<script type="text/javascript">

/*<![CDATA[*/

$('#popup-form').yiiactiveform({'validateOnSubmit':true,'attributes':[{'id':'WelcomeModel_email','inputID':'WelcomeModel_email','errorID':'WelcomeModel_email_em_','model':'WelcomeModel','name':'email','enableAjaxValidation':false,'clientValidation':function(value, messages, attribute) {


if($.trim(value)=='') {

	messages.push("Email cannot be blank.");

}




if($.trim(value)!='' && !value.match(/^[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/)) {

	messages.push("Email is not a valid email address.");

}


}}]});

/*]]>*/

</script>

I’m not sure what i should change for this to work…??

// Casper

if you want to create popup window, just use javascript


window.open()

Then if you want to close this window, create actionClose in your controller, and register


self.close()

And redirect user to this action to close this popup automatically.

It is very usefull when user session has expired, but you don’t want to refresh and go to login page, just open popup with login page, add some GET parameters to detect wether login page is opened in popup, and redirect to ‘close’ action in case of it is.

Hi Gusarov

Thanks for your input

But your method with self.close doesn’t seem to work at all…

I’m getting a:

Error 500

Use of undefined constant self - assumed ‘self’

self.close() must be a javascript code.




public function actionClose(){

	$js='self.close()';

	Yii::app()->clientscript->registerScript('close',$js,1);

	$this->render('close');

}

And here is my view "close":




<?php

	$this->pageTitle = Yii::app()->name . ' - Closing';

?>

Hi Gusarov

I did exactly as you wrote - and it still deosnt work…

The popup is still there - it, just show a full page, of the whole page in the popup… :confused:

No one…?

It’s the last thing i need to work out before my website is up and running… :confused:

Just wanted to say i have found a solution…

I ended up using fancybox2 instead (as i had made a well working extension for this already)

and then i close up the popup window from my controller with:


Yii::app()->clientScript->registerScript('close-welcome','parent.jQuery.fancybox.close();');

Thanks for your help anyway "Gusarov" and "MadAnd"