【原创】原生js实现的Alert弹窗

感谢您使用alert插件，本插件由【小莫唐尼】提供，您可以任意修改！
注意：本插件为作者小莫唐尼原创，若重新修改发布请注明原作者，谢谢！
说明：本插件为原生js插件，不依赖任何第三方脚本，源码开放可放心使用。

插件特点

1. 支持自定义顶部、内容、底部；

2. 支持内容区域复制，可以选择文本内容或者连带dom元素复制（暂未支持图片复制）；

3. 支持自由拖拽；

4. 支持动画效果；

5. 支持自定义位置显示；

6. 更多功能，欢迎您来提供建议和反馈…

更新记录

版本V1.1.2 ：2022年03月24日

1. 新增：支持配置弹窗显示位置position；

2. 新增：支持配置弹窗显示动画效果animate；

3. 优化：优化内部js代码，将css进行分离，注意：当前版本您需要单独引用css样式文件；

插件下载

在线下载地址传送门（立即传送）

仓库源码地址传送门（立即传送）

插件预览图

开始使用

第一步：下载并引用 样式和脚本

1.引用css样式

  <!-- 基础样式：必须 -->
  <!-- <link rel="stylesheet" href="./alert/css/alert.css"> -->
  <link rel="stylesheet" href="./alert/css/alert.min.css">
  <!-- 动画支持，非必须：animate属性 -->
  <!-- <link rel="stylesheet" href="./alert/css/alert.ani.css"> -->
  <link rel="stylesheet" href="./alert/css/alert.ani.min.css">

2.引用js

<!-- <script src="./alert/js/alert.js"></script> -->
<script src="./alert/js/alert.min.js"></script>

第二步：初始化插件

以下为简单的示例，您可以往下查看所有的配置项，或者查看插件的README.md文档

<script> 
      const tzAlert = new TzAlert({
            center: true, // 内容居中 
            title: {
                html: '标题',
                color: '#ff80ab',
                fontSize: '18px'
            }, 
            mask: {
                use: true,
                background: 'rgba(0,0,0,.6)'
            },
            tips: {
                html: '点击内容部分即可复制'
            },
            content: {
                html: '我是一段文字，你来复制我啊！！！这里也支持html内容'
            },
            onEvents:function(e) {
                console.log('监听了内部的按钮事件')
                console.log(e)
            },
            onMounted: function () {
                console.log('执行我吧')
            }
        });
        tzAlert.open(); // 初始化显示(方式2)
    </script>

插件配置项

参数名	参数类型	是否必填	默认值	说明
width	string	是	460px	弹窗的宽度，必须是px单位
top	string	是	20px	距离顶部的距离，可以使用任意css单位，推荐使用px
radius	string	是	6px	弹窗的圆角，必须存在单位
shadow	string	是	‘0 2px 10px rgba(0,0,0,0.2)’	弹窗的阴影
center	boolean	是	false	内容是否居中显示，如标题，tips提示，默认的确认和取消按钮等
useDrop	boolean	是	true	启用拖拽效果，启用后点击弹窗的标题部分即可拖拽
useMaskClose	boolean	是	true	点击遮罩层关闭弹窗，前提是启用了遮罩层
useInitShow	boolean	是	false	是否在初始化完成的时候就直接显示弹窗，此时不需要额外调用open方法
useEscClose	boolean	是	false	是否允许使用esc键关闭弹窗
position	string	是	“top”	弹窗的位置，可选值： center=居中 left=左边 left-top=左上角 left-bottom=左下角 top=顶部 right-top=右上角 right=右边 right-bottom=右下角 bottom=底部
animate	string	否	“”	弹窗动画，可选值：zoom-in、left、top、right、bottom
copy	object	是	查看下方copy属性	对内部复制事件的配置，具体的配置项请看下方的copy配置项，复制功能仅能对以下的content配置项中传入的html参数内容
confirm	object	是	查看下方copy属性	对确定按钮的配置，具体的配置项请看下方的confirm配置项
cancel	object	是	查看下方copy属性	对取消按钮的配置，具体的配置项请看下方的cancel配置项
mask	object	是	查看下方copy属性	对遮罩层的配置，具体的配置项请看下方的mask配置项
title	object	是	查看下方copy属性	对弹窗标题的配置，具体的配置项请看下方的title配置项
content	object	是	查看下方copy属性	对弹窗内容的配置，具体的配置项请看下方的content配置项
tips	object	是	查看下方copy属性	对提示信息的配置，具体的配置项请看下方的tips配置项
bottom	object	是	查看下方copy属性	对弹窗底部的配置，具体的配置项请看下方的bottom配置项
onClose	function	否	null	监听关闭事件
onEvents	function	否	null	若启用确定按钮confirm.use=true或者取消cancel.use=true，并且实例化的时候传入该函数，那么该函数会返回内部的确定按钮和取消按钮的点击事件，否则确定按钮和取消按钮将会默认绑定关闭事件。
onMounted	function	否	null	该函数会在弹窗渲染并打开完成后执行

copy配置项

参数名	参数类型	是否必填	默认值	说明
use	Boolean	是	true	是否启用复制功能
onlyText	Boolean	是	true	是否仅复制文本，否则会复制dom元素
useTips	Boolean	是	true	复制成功后是否显示复制成功的提示
isDbClick	Boolean	是	true	是否双击才能够复制，true=双击，false=单击

confirm配置项

参数名	参数类型	是否必填	默认值	说明
use	boolean	是	true	是否显示按钮
text	string	是	‘确认’	按钮文字
textColor	string	否	‘#fff’	按钮文字颜色
bgColor	string	否	‘#ff80ab’	按钮背景颜色
radius	string	否	‘6px’	按钮圆角
border	string	否	‘1px solid #ff80ab’	按钮边框
shadow	string	否	‘0px 1px 10px rgba(255, 128, 171, .4)’	按钮的阴影效果（hover事件使用鼠标经过的时候出现）
padding	string	否	‘6px 15px’	按钮的内边距

cancel配置项

参数名	参数类型	是否必填	默认值	说明
use	boolean	是	true	是否显示按钮
text	string	是	‘取消’	按钮文字
textColor	string	否	‘#333’	按钮文字颜色
bgColor	string	否	‘#fff’	按钮背景颜色
radius	string	否	‘6px’	按钮圆角
border	string	否	‘1px solid #dcdfe6’	按钮边框
shadow	string	否	‘0px 1px 3px rgba(144, 147, 153, .2)’	按钮的阴影效果（hover事件使用鼠标经过的时候出现）
padding	string	否	‘6px 15px’	按钮的内边距

mask配置项

参数名	参数类型	是否必填	默认值	说明
use	boolean	是	true	使用遮罩层
background	string	是	‘rgba(0,0,0,.3)’	遮罩层的颜色

title配置项

参数名	参数类型	是否必填	默认值	说明
html	string	否	" "	弹窗的标题内容，支持html，若设置为 “” 则不显示
color	string	否	" "	文字的颜色
fontSize	string	否	" "	字体大小，必须携带字体大小单位
fontWeight	string	否	" "	字体的加粗值

content配置项

参数名	参数类型	是否必填	默认值	说明
html	string	否	“”	弹窗的主体内容，支持html
padding	string	否	“”	弹窗的主体内容内边距

tips配置项

参数名	参数类型	是否必填	默认值	说明
html	string	否	" "	弹窗提示文字内容，支持html，若设置为 “” 则不显示
color	string	否	" "	文字的颜色
fontSize	string	否	" "	字体大小，必须携带字体大小单位
fontWeight	string	否	" "	字体的加粗值

bottom配置项

参数名	参数类型	是否必填	默认值	说明
show	boolean	是	true	是否显示底部区域，该参数会影响内部按钮的显示，若赋值false则确定和取消按钮不会显示
isCover	boolean	是	false	是否对内置的按钮进行覆盖
html	string	否	" "	弹窗底部的内容，支持html内容

内置事件

事件名	调用方式	参数	说明
open	let tzAlert = new TzAlert(options) tzAlert.open()	options（非必填）	打开弹窗，可以传入参数，参数内容与实例化时候的参数一致，可参考实例化参数进行赋值
close	let tzAlert = new TzAlert(options) tzAlert.close()	无	关闭弹窗