JSP 頁面實現模態彈窗交互：引入 BlockUI 插件簡化遮罩與居中顯示

引入 BlockUI

<script src="https://cdn.jsdelivr.net/npm/jquery.blockui@2.70/jquery.blockUI.min.js"></script>

基本用法

// 彈出模態層，內容為 #dialogDiv
$('#btnAdd').click(function() {
    $.blockUI({
        message: $('#dialogDiv'),
        css: { top: '30%', left: '35%', width: '30%', border: 'none', backgroundColor: '#fff' },
        overlayCSS: { backgroundColor: '#000', opacity: 0.5 }
    });
});

// 關閉
$('#btnClose').click(function() { $.unblockUI(); });

進階：AJAX 載入內容

$.blockUI({ message: '
載入中...
' });
$.get('/dialog/content', function(html) {
    $.blockUI({ message: html, css: {...} });
});

優勢

• 自動處理遮罩層、居中、拖拽、鍵盤 ESC 關閉。
• 輕量（~3KB gzipped），無依賴除 jQuery。