具体案例查看co-dialog：https://koringz.github.io/co-dialog/index.html
2.0.1版本优化项，代码压缩，修复PC和移动端自适应，修复显示弹出框浏览器边框隐藏对body产生内容错位，添加 onResize 默认为 true， 添加选项 type 不同类型显示弹出框 [‘success‘, ‘error‘, ‘warning‘, ‘info‘, ‘question‘].
压缩内容的实现方式，主要是通过重构了内部代码，整理静态方法，抽离被多次调用的代码，抽离的代码结合对象结构，另外结合函数结构，重复出现代码进行合并处理。
PC和移动端自适应之前考虑参考 sweetAlert2 用flex弹性布局，但是因为sweetAlert2 不支持拖放，且layout布局仅居中显示，所以放弃了flex布局，采用absolute布局，结合onResize简单实现，并且默认情况为true。
修复点击显示弹出框时，浏览器边框隐藏对body产生内容错位。其实是对body进行一次位移差计算，浏览器边框没了，body宽度就比以前多了，那么body里面的内容就发生错位，解决错误使用浏览器的宽度 减去 body的宽度，得出边框的宽度，最后给body使用paddingRight设置内边距，实现全屏效果并且不会发生错位。
添加选项 type 不同类型显示弹出框，这是type就是一个icon提示效果的功能，比如http请求失败和成功，警告等信息，就必须有这个交互性效果存在，我们只需要设置type即可，比如:
最简单的方式，这个success就是我设置的type类型。
coog.app(".base").use("标题","这是一个基础的弹出框", “success”).show()
在use方法里面设置
coog.app(".try-drag").use({
title: "拖动-isDrag",
message: "请尝试拖动窗口",
isDrag: true,
type: "success",
}).show()
原文地址：https://www.cnblogs.com/hao5599/p/9840471.html