无需登录 数据私有 本地保存

自定义弹窗设计器 - 替代原生Alert/Confirm

11
0
0
0
弹窗设计器
替代原生 Alert / Confirm
预设：
配置面板

📱 预览区域 — 点击下方按钮体验弹窗效果
点击按钮查看弹窗效果
确认操作
确定要执行此操作吗？
生成的代码 

            


            
            

                
常见问题 FAQ

                

                    

                        

                        

                            
原生 Alert 和 Confirm 样式固定、无法修改，且在不同浏览器中表现不一致。自定义弹窗允许你完全控制样式、动画、按钮和行为，提供更好的用户体验和品牌一致性。本工具生成的弹窗使用纯 HTML/CSS/JS，不依赖任何第三方库。

                        

                    

                    

                        

                        

                            
不需要。生成的代码是纯原生 JavaScript + CSS，零依赖，可直接复制到任何 HTML 文件中使用。弹窗函数返回 Promise，支持 async/await 语法，与现代前端框架（React、Vue、Angular）也能完美兼容。

                        

                    

                    

                        

                        

                            
支持 6 种类型：信息提示（Alert）、成功提示、警告提示、错误提示、确认对话框（Confirm）和输入对话框（Prompt）。每种类型都有预设的图标和颜色方案，你也可以完全自定义。

                        

                    

                    

                        

                        

                            
支持 6 种入场动画：淡入（Fade In）、缩放（Scale In）、下滑（Slide Down）、上滑（Slide Up）、弹跳（Bounce In）和翻转（Flip In）。动画时长可在 0.1s 到 1.5s 之间调节，所有动画均使用纯 CSS @keyframes 实现，性能优异。

                        

                    

                    

                        

                        

                            
只需三步：1) 复制 CSS 代码到 <style> 标签中；2) 复制 HTML 弹窗模板到 <body> 末尾；3) 复制 JS 函数。然后通过 showDialog({type:'confirm', title:'...', message:'...'}) 调用即可。对于 Confirm 和 Prompt，函数返回 Promise，可通过 await 获取用户操作结果。

                        

                    

                    

                        

                        

                            
生成的弹窗采用响应式设计，在移动端会自动缩小宽度（最大宽度 90vw），按钮会纵向排列，确保在小屏幕上也有良好的可用性。弹窗始终居中显示，遮罩层覆盖整个视口。

                        

                    

                    

                        

                        

                            
在生成的 CSS 中，弹窗的 z-index 默认为 9999，遮罩层为 9998。如果你的页面中有其他元素需要更高的层级，可以在生成代码后搜索 z-index 并手动调整数值。

                        

                    

                    

                        

                        

                            
生成的代码默认使用单例模式，同一时间只显示一个弹窗。如果调用新的弹窗，会自动关闭当前弹窗。这避免了多个弹窗叠加导致的用户体验问题。如需嵌套弹窗，可以在回调中再次调用 showDialog。

                        

                    

                

            

        

    


    
    

    
    



`;
        $codeDisplay.text(code);
    }

    // 复制按钮
    $('#dd-copy-btn, #dd-copy-html, #dd-copy-css, #dd-copy-js').on('click', function() {
        const fullCode = $codeDisplay.text();
        let toCopy = fullCode;
        const id = $(this).attr('id');
        if (id === 'dd-copy-css') {
            const match = fullCode.match(/\/\* =+ CSS 样式 =+ \*\/([\s\S]*?)<\/style>/);
            if (match) toCopy = match[1].trim();
        } else if (id === 'dd-copy-js') {
            const match = fullCode.match(/\/\* =+ JavaScript 调用函数 =+ \*\/([\s\S]*?)<\/script>/);
            if (match) toCopy = match[1].trim();
        } else if (id === 'dd-copy-html') {
            const match = fullCode.match(/\/\* =+ 自定义弹窗 HTML 结构 =+ \*\/([\s\S]*?)<\/div>\s*