jQuery UI Dialog 實現豆瓣 FM 風格模態註冊框：遮罩層+模態對話框

點擊註冊按鈕，彈出模態框，背景變灰不可點擊。這是經典 模態對話框 效果，jQuery UI dialog 組件開箱即用。

完整示例代碼

點擊註冊



    

        用戶名: 


        密碼: 


        提交
    

核心屬性解析

原生 JS 實現思路（無依賴）

1. 建立遮罩 div：position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999;
2. 建立對話框 div：position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1000;
3. 點擊觸發：同時 display:block 兩者
4. 點擊遮罩/關閉按鈕：同時 display:none
5. ESC 鍵關閉：document.addEventListener('keydown', e => e.key==='Escape' && close())

總結

豆瓣 FM 風格註冊框 = jQuery UI Dialog + modal: true。引入官方 CDN 資源，幾行代碼即可實現專業級模態體驗。無依賴場景可手寫遮罩+定位邏輯，核心是 z-index 層級管理與焦點鎖定。