Yii Framework CJuiDialog 對話框元件：模態/非模態、按鈕事件與動態內容

CJuiDialog 封裝 jQuery UI Dialog，提供彈出式對話框，支援模態/非模態、拖曳、調整大小、按鈕事件與 AJAX 動態載入。

基本結構：beginWidget / endWidget

<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'mydialog',
    'options' => array(
        'title' => '對話框標題',
        'width' => 500,
        'height' => 300,
        'autoOpen' => false,  // 預設隱藏，需 JS 觸發開啟
        'modal' => false,     // 非模態
        'resizable' => true,
        'draggable' => true,
    ),
)); ?>
    對話框內容區塊（支援任意 HTML、Widget、Partial Render）
<?php $this->endWidget('zii.widgets.jui.CJuiDialog'); ?>

<?php echo CHtml::link('開啟對話框', '#', array(
    'onclick' => '$("#mydialog").dialog("open"); return false;'
)); ?>

模態對話框完整範例（含按鈕事件）

<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'mymodal',
    'options' => array(
        'title' => '確認刪除',
        'width' => 400,
        'height' => 200,
        'autoOpen' => false,
        'modal' => true,                    // 模態：遮罩背景
        'resizable' => false,
        'overlay' => array(
            'backgroundColor' => '#000',
            'opacity' => '0.5',
        ),
        'buttons' => array(
            '確定' => 'js:function(){ alert("執行刪除"); $(this).dialog("close"); }',
            '取消' => 'js:function(){ $(this).dialog("close"); }',
        ),
    ),
)); ?>
    <p>確定要刪除此項目嗎？此操作不可復原。</p>
<?php $this->endWidget(); ?>

<?php echo CHtml::link('刪除', '#', array(
    'onclick' => '$("#mymodal").dialog("open"); return false;'
)); ?>

進階：AJAX 動態載入內容

<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'ajaxDialog',
    'options' => array(
        'title' => '編輯用戶',
        'width' => 600,
        'autoOpen' => false,
        'modal' => true,
        'open' => 'js:function() {
            $(this).load("'.Yii::app()->createUrl('user/edit', array('id'=>1)).'");
        }',
        'close' => 'js:function() { $(this).html(""); }', // 關閉清空
    ),
)); ?><?php $this->endWidget(); ?>

常用方法與事件

注意事項

• autoOpen: false 時，內容不會在頁面載入時渲染，需 JS 觸發
• 模態對話框會阻擋背景互動，適合確認刪除、表單編輯等關鍵操作
• 大量內容建議 open 事件 AJAX 載入，避免首頁載入過大
• 表單送出後關閉：$.post(url, data, function(){ $("#dialog").dialog("close"); });
• 無障礙：jQuery UI Dialog 內建鍵盤導航（Esc 關閉、Tab 循環）