JavaScript自定义弹窗特效

自定义弹窗的 JavaScript 特效，用起来真的挺顺手的。你要是在项目里经常需要弹点提示、确认框，自己写一个通用弹窗组件绝对不亏。

弹窗的核心就是DOM 操作加事件监听，再配上点CSS 动画，效果立马就有了。比如点击某个按钮后，用addEventListener捕获事件，控制弹窗的display属性来显示或隐藏。

如果你对构造函数不太熟，那可以考虑先写个函数版本，把弹窗的内容、按钮和回调都封装进去，灵活性也挺高。像：

function showDialog(title, content) {
  // 生成 HTML 结构，插入页面
  // 绑定关闭事件
}

模态和非模态都能做，看你场景需求。模态适合需要用户确认操作的，比如删除提示；非模态就自由多了，可以做成右下角的消息提示。

动画方面，像opacity加transition，做个淡入淡出的效果就丝滑。用position: fixed配合top和left，居中没压力，响应也快。

对了，别忘了响应式布局，尤其是做移动端弹窗，flex和media queries有用，不然手机上一看弹窗炸了，多尴尬。

你也可以看看这些例子，有点参考意义：Bootstrap 自定义模态窗口样式、js 自定义模态与非模态窗口。

，弹窗这玩意儿看起来简单，其实能做出不少花样。如果你想搞个轻量、可控的弹窗系统，手撸一套绝对值得。