【原创】原生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>

插件配置项

copy配置项

confirm配置项

cancel配置项

mask配置项

title配置项

content配置项

tips配置项

bottom配置项

内置事件