1. Ajax Link
2. Action
3. Popup view Page
4. Popup Example with my style

Simple Ajax popup view with Ajax link

Ajax Link ¶

In one of your view file, where popup needed.

CHtml::ajaxLink('View Popup', 'ur-controller/ur-action', 
    array('update' => '#simple-div'), 
    array('id' => 'simple-link-'.uniqid())
);

<div id="simple-div"></div>

Action ¶

In the action we need to renderpartial a view file

public function actionUr-action()
{
		
	$this->renderPartial('view',array('data'=>'Ur-data'),false,true);
		
}

Popup view Page ¶

simple one

<script>

$(document).ready(function() {
    $("#dialog").dialog();
});

</script>

<div id="dialog" title="Dialog Title">I'm in a dialog</div>

Popup Example with my style ¶

<script>

$(document).ready(function() {
    $("#dialog").dialog();
});
 
</script>

<style>

  
.window {
  position:absolute;
  left:0;
  top:0;
  width:300px !important;
  min-height:160px !important;
  z-index:9999;
  padding:20px;
  border:10px #404040 solid;
  -moz-box-shadow:0px 0px 3px #000;
  -webkit-box-shadow:0px 0px 3px #000;
  box-shadow:0px 0px 15px #000;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.event_viewbx
{
	margin:0px;
	padding:20px;
	position:relative;
	background:url(images/grid_noise.png) repeat;
}

.txt_bx{ margin:0px; padding:5px 0px; width:440px;}
.txt_bx span
{
	color: #666666;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.001em;
    padding:0px 5px;
}
.ui-corner-all 
{
	position:absolute;
	top:8px;
	right:0px;
	z-index:10000;
	color:#ed827c;
	font-size:12px;
	
	
}
.ui-corner-all a{text-indent:-999px !important; background:url(images/evnt_close.png) no-repeat !important;
	width:12px; height:12px;}



</style>

<div id="dialog" class="window">
	<div class="event_viewbx">
    <div class="e_closebttn"></div>
    <div class="txt_bx">
    <span>Time:</span><span><?php echo time();?></span>
    </div>
    <div class="txt_bx">
    <span>Data:</span><span><?php echo $data;?></span>
    </div>
    <div class="txt_bx">
    <span>Description:</span><span>I'm in a dialog</span>
    </div>
   
    </div>
</div>

Thats it!! yes it is!!

Start creating complex ones!!