這是一個輕量、直接、容易整合的 jQuery 彈窗元件。你可以用它快速建立通知、介紹卡、確認框、表單、圖片燈箱與 AJAX 內容視窗，而且不用改動既有網站架構。
不論是產品介紹、提醒訊息、表單、圖片或 AJAX 結果，都可以在同一套 API 裡完成。
新版頁面改成產品與文件混合的 landing page 結構，讓訪客能先理解它的價值，再快速找到安裝方式、核心 API 與實際用法。
不依賴龐大的 UI 框架，直接用 jQuery 就能建立乾淨、置中的互動視窗。
內容可放 HTML、圖片、表單或 AJAX 結果，並能直接透過 css 參數調整視覺風格。
提供 beforeBlock、onBlock、unBlock 等 hooks，方便串接提示、追蹤與後續行為。
如果你已經有 jQuery，mybox 的整合成本非常低。這也是它很適合被用來補強舊站互動體驗的原因。
3WA問題解決專家工作室<script src="//3wa.tw/inc/javascript/jquery/jquery-3.7.1.min.js"></script>
<script src="//3wa.tw/inc/javascript/jquery/mybox/mybox-lastest.min.js"></script>
<script>
$.mybox({
message: "<div>Hello mybox.js</div>",
css: {
'padding': '24px',
'background-color': '#0b1420',
'color': '#ecf6ff'
}
});
</script>mybox.js 的 API 設計相當直接，對於需要快速導入彈窗互動的舊站與工具站來說很友善。
$.mybox(options)
開啟彈窗主函式，可帶入內容、樣式、事件與背景互動設定。
$.unmybox()
關閉目前的 mybox 視窗，適合綁在按鈕、流程結束或 callback。
$.mybox_isOpen()
檢查目前是否有視窗開啟，回傳 true 或 false。
is_background_touch_close是否允許點擊背景時直接關閉視窗。
true / falsemessage視窗內容，可直接放文字、HTML、圖片、DOM 內容或後續載入的結果。
$('#template').html()css直接覆寫彈窗容器樣式，快速調整寬度、背景、字級與邊框。
{'padding':'32px','background-color':'#101826'}beforeBlock視窗顯示前執行，可用來記錄狀態或顯示前置提示。
function(){ console.log('before'); }onBlock視窗完成顯示後執行，適合做聚焦、動畫或事件初始化。
function(){ console.log('opened'); }unBlock視窗關閉後執行，適合清理狀態或串接後續流程。
function(){ console.log('closed'); }這是本頁用來開啟 mybox 時的預設 style 設定，想快速做出接近本頁視覺時可以直接參考。
css: $.extend({
'padding': '0',
'border': '1px solid rgba(106,214,255,0.28)',
'background-color': '#0d1724',
'color': '#ecf6ff',
'border-radius': '24px',
'box-shadow': '0 30px 90px rgba(0,0,0,.45)'
}, css || {})同一套 API 可以覆蓋提示、互動流程、媒體展示與臨時表單，大幅減少你在不同元件之間切換的成本。
用一致的視窗體驗管理內容，讓流程更集中，也讓設計語言更一致。
用一致的視窗體驗管理內容，讓流程更集中，也讓設計語言更一致。
用一致的視窗體驗管理內容，讓流程更集中，也讓設計語言更一致。
用一致的視窗體驗管理內容，讓流程更集中，也讓設計語言更一致。
用一致的視窗體驗管理內容，讓流程更集中，也讓設計語言更一致。
用一致的視窗體驗管理內容，讓流程更集中，也讓設計語言更一致。
這裡把 mybox.js 重新整理成可直接理解的 demo 群組。每張卡片都包含情境說明、觸發按鈕與對應程式碼。
最小可用範例，只需要 message 就能立即打開提示內容。
$.mybox({
message: "<div class='demo-message'>Hello mybox.js</div>"
});直接使用 css 參數客製背景、邊框、字級與留白。
$.mybox({
message: "<h3>Custom Style</h3><p>Use css to shape the modal.</p>",
css: {
'padding': '36px',
'border': '1px solid #4ad1ff',
'background-color': '#09131f',
'color': '#eaf7ff'
}
});當使用者點擊背景區塊時，視窗會自動關閉。
$.mybox({
is_background_touch_close: true,
message: "<div>Tap the dark background to close.</div>"
});搭配 $.mybox_isOpen() 與 $.unmybox() 做流程控制。
if ($.mybox_isOpen()) {
$.unmybox();
} else {
$.mybox({
message: "<div>mybox is now open.</div>"
});
}用圖片、標題、文字與 CTA 組合出帶品牌感的介紹視窗。
$.mybox({
message: $("#demo-template-product-2077").html(),
css: {
'max-width': '640px',
'padding': '0',
'background-color': '#0d1522'
}
});適合成功訊息、提醒通知或流程完成提示。
$.mybox({
message: $("#demo-template-notice").html(),
css: {
'max-width': '420px',
'padding': '0',
'background-color': '#0e1712'
}
});展示確認與取消按鈕，適合刪除或提交前再次確認。
$.mybox({
message: $("#demo-template-confirm").html(),
css: {
'max-width': '460px',
'padding': '0',
'background-color': '#181112'
}
});先開啟 loading 狀態，再把遠端或延遲載入的內容放進視窗。
$.mybox({
message: "<div class='loading'>Loading...</div>"
});
setTimeout(function () {
$("div[id^='mybox_div_']").last().html($("#demo-template-ajax").html());
$.mybox_center();
}, 600);拿來做品牌圖、截圖或作品集大圖預覽都很直覺。
$.mybox({
is_background_touch_close: true,
message: $("#demo-template-image").html(),
css: {
'padding': '0',
'background-color': '#05070b'
}
});把聯絡表單、登入表單或快速輸入流程包進同一個互動層。
$.mybox({
message: $("#demo-template-form").html(),
css: {
'max-width': '540px',
'padding': '0',
'background-color': '#0e1320'
}
});示範如何用 $("div[id^='mybox_div']") 取得目前開啟的視窗，並直接更新裡面的 HTML。
$.mybox({
message: $("#demo-template-current-box").html()
});
$("div[id^='mybox_div'] [data-demo-action='replace-box']").off().click(function () {
$("div[id^='mybox_div']").html("<div class='p-4'>Content Updated</div>");
$.mybox_center();
});示範在右上角放一張圖片當作關閉按鈕，並透過 reqc selector 綁定 click 事件。
$.mybox({
message: $("#demo-template-image-close").html()
});
$("div[id^='mybox_div'] img[reqc='imgXClose']").off().click(function () {
$.unmybox();
});如果覺得每次都寫 $.mybox() 太麻煩，也可以直接用 dialogMyBoxOn、dialogMyBoxOff 做簡化包裝。
dialogMyBoxOn($("#demo-template-dialog-shortcut").html(), true, function () {
$("div[id^='mybox_div'] [data-demo-action='dialog-close']").off().click(function () {
dialogMyBoxOff();
});
});你可以直接使用既有版本，也能前往 Demo 與 GitHub 了解更多背景資訊。
如果你正在維護一個已經上線的網站，卻想快速補上介紹視窗、提醒視窗、流程確認或內容燈箱，mybox.js 會是一個相當省力的選擇。
保留原本的版本更新資訊，讓使用者仍能快速查看歷史修正與功能補強。
Fix fullscreen scrollTop position. Fix redefined beforeBlock, onBlock, unBlock event issue.
Upgrade for jQuery 3.2.1 support. Fix dom.size() to dom.length.
Fix scroll position.
Limit mybox width and height the window screen size 90%.
Fix window scrollTop after unmybox when is_background_touch_close equals true.
Fix window scrollTop after unmybox.
Remove jQuery version check in setup.
Add $.mybox_isOpen().
Fixed contents.
Fixed screen scroll issue.
Fixed screen center issue.
Building on first time.
這個版本把產品介紹卡升級成霓虹感 slider，讓圖片、標題、說明與 CTA 都有更強的未來感舞台。
適合拿來放功能主視覺、版本海報、品牌圖或作品截圖。切換按鈕會在同一個 mybox 視窗內瀏覽不同畫面。
這種結構很適合用來呈現成功通知、儲存完成或流程結束的提示。
這個範例模擬在刪除、送出或覆蓋資料前，先讓使用者再確認一次。
先顯示 loading 狀態，再把結果塞進同一個視窗。
實務上可以把這段替換成真實的 AJAX response。這裡用延遲模擬遠端內容回來後再更新視窗。
這個範例用來示範圖片、品牌視覺或截圖預覽。點背景即可關閉，互動方式相當直覺。
這個範例示範如何把較完整的表單流程包進 mybox，讓聯絡、報名、詢問或快速回報都能集中在同一個互動層。
按下下方按鈕後，會用 $("div[id^='mybox_div']") 取得目前開啟的視窗，再直接替換裡面的內容。
當你抓到 $("div[id^='mybox_div']") 之後，就可以直接改裡面的 HTML，最後再呼叫 $.mybox_center() 重新置中。
$("div[id^='mybox_div']").html("<div>New Content</div>");
$.mybox_center();
圖片關閉鈕
把圖片放進 mybox 內容後，再用 $("div[id^='mybox_div'] img[reqc='imgXClose']") 綁 click，就能做出自訂關閉按鈕。
$("div[id^='mybox_div'] img[reqc='imgXClose']").off().click(function () {
$.unmybox();
});如果你只是想快速開一個通用視窗，不想每次都重寫 $.mybox() 的參數，這兩個 helper 會很順手。
dialogMyBoxOn($("#demo-template-dialog-shortcut").html(), true, function () {
$("div[id^='mybox_div'] [data-demo-action='dialog-close']").off().click(function () {
dialogMyBoxOff();
});
});function dialogMyBoxOn(message, isTouchOutSideClose, functionAction) {
$.mybox({
is_background_touch_close: isTouchOutSideClose,
message: message,
css: {
border: '2px solid #fff',
backgroundColor: '#000',
color: '#fff',
padding: '15px'
},
onBlock: function () {
functionAction();
}
});
}
function dialogMyBoxOff() {
$.unmybox();
}