感谢您使用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>

插件配置项

copy配置项

confirm配置项

cancel配置项

mask配置项

title配置项

content配置项

tips配置项

bottom配置项

内置事件