Joomla 內建 Modal 行為 基於 MooTools SqueezeBox，讓元件視圖輕鬆彈出 iframe 視窗。本文示範兩種等效實作：方式一使用 JHTML::_('behavior.modal') 聲明式標記（推薦，簡潔）；方式二手動引入 JS/CSS 呼叫 SqueezeBox.fromElement()（適合客製化邏輯）。並說明必要資源路徑、參數詳解、常見坑點。
<?php
// 1. 載入 Modal 行為（會自動引入 modal.js、modal.css）
JHTML::_('behavior.modal', 'a.modal'); // 選擇器：所有 class="modal" 的 標籤
?>
<a href="/index.php?option=com_mycomp&view=item&layout=modal&tmpl=component"
class="modal"
rel="{handler: 'iframe', size: {x: 570, y: 400}}">
彈出檢視
</a>
rel 屬性（JSON 格式）| 參數 | 說明 | 範例 |
|---|---|---|
| handler | 內容類型 | 'iframe' (外部頁面), 'adopt' (頁面內元素), 'image' (圖片) |
| size | 視窗尺寸 {x: 寬, y: 高} | {x: 570, y: 400} |
| onClose | 關閉回調函數 | function() { window.location.reload(); } |
tmpl=component被彈出的 URL 需加上 &tmpl=component，只輸出內容區塊（無模板框架），否則會套雙層模板。
<!-- 1. 手動引入資源（通常 JHTML 已自動處理，若未載入需補上） -->
<script src="/media/system/js/modal.js"></script>
<link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />
<a id="myModalLink" href="#">點擊彈出</a>
<script>
document.getElementById('myModalLink').addEventListener('click', function(e) {
e.preventDefault();
// 2. 程式化開啟
SqueezeBox.fromElement(this, {
handler: 'iframe',
size: {x: 570, y: 400},
url: '/index.php?option=com_mycomp&view=item&layout=modal&tmpl=component'
});
});
</script>
| 檔案 | Joomla 3.x 路徑 | Joomla 4.x 路徑 |
|---|---|---|
| modal.js | /media/system/js/modal.js | /media/vendor/joomla/modal/modal.js (或媒體管理器) |
| modal.css | /media/system/css/modal.css | /media/vendor/joomla/modal/modal.css |
| 現象 | 原因 | 解決 |
|---|---|---|
| 彈出視窗顯示完整頁面（含 header/footer） | 目標 URL 缺少 tmpl=component | 連結加上 &tmpl=component |
| 點擊無反應 / JS 報錯 | modal.js 未載入 / MooTools 衝突 | 確認 JHTML behavior 已呼叫；Joomla 4 可能需手動載入 |
| 視窗尺寸不正確 | size 參數格式錯誤 | 使用 {x: 寬, y: 高} 物件格式 |
| 關閉後父頁面需重新整理 | 無回調 | 加入 onClose: function() { window.location.reload(); } |
// 父頁面連結
JHTML::_('behavior.modal');
echo '
新增項目
';
子表單提交成功後，輸出 JS 關閉自身：
<script>
if (window.parent && window.parent.SqueezeBox) {
window.parent.SqueezeBox.close();
}
</script>
JHTML::_('behavior.modal') + class="modal" + rel="{handler:'iframe',...}"，最少代碼、最易維護。SqueezeBox.fromElement()，完全掌控時機與參數。tmpl=component、資源正確載入、選擇器匹配。掌握這兩種方式，你的 Joomla 元件即擁有專業級的 Modal 互動體驗，無需引入外部 Lightbox 庫。
