Quantcast
Channel: Live News for Yii Framework
Viewing all articles
Browse latest Browse all 3375

[Wiki] Simple Ajax popup

$
0
0

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!!


Viewing all articles
Browse latest Browse all 3375

Trending Articles