原生js alert弹窗插件(原创)

所属分类:UI-对话框,弹出层

 14104  55  查看评论 (2)
分享到微信朋友圈
X
原生js alert弹窗插件(原创) ie兼容12


更新时间:2022-03-27 22:30:05

更新说明:

  • 新增:增加弹窗锁定浏览器滚动条参数;新增:增加动画执行速度参数;

  • 新增:onEvents的返回参数多增加ctx返回值,可用于某些场景下无法调用实例如tzAlert.close()操作关闭的功能,此时可使用 e.ctx.cose()进行关闭;

  • 更新:更新README.md文档,补充缺少的参数说明和新参数的说明;



更新时间:2022-03-25 00:22:10

更新说明:

  • 新增:支持设置弹窗显示位置;

  • 新增:支持弹窗显示动画效果;

  • 优化:对内部代码进行优化、对css进行分离;


更新时间:2022-03-15 00:55:48

感谢您使用alert插件,本插件由【小莫唐尼】提供,您可以任意修改!

说明

本插件为原生js插件,不依赖任何第三方脚本,源码开放可放心使用。

开始使用

第一步:下载并引用 脚本

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

 第二步:初始化插件

以下为简单的示例,您可以往下查看所有的配置项

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

插件配置项

参数名
参数类型是否必填默认值说明
widthstring460px 弹窗的宽度,必须是px单位 
 topstring20px  距离顶部的距离,可以使用任意css单位,推荐使用px 
radiusstring6px 弹窗的圆角,必须存在单位
shadow    string'0 2px 10px rgba(0,0,0,0.2)'弹窗的阴影   
center    booleanfalse 内容是否居中显示,如标题,tips提示,默认的确认和取消按钮等
useDrop    boolean true 启用拖拽效果,启用后点击弹窗的标题部分即可拖拽
useMaskCloseboolean true 点击遮罩层关闭弹窗,前提是启用了遮罩层
useInitShow  booleanfalse是否在初始化完成的时候就直接显示弹窗,此时不需要额外调用open方法  
copy     object查看下方copy属性对内部`复制事件`的配置,具体的配置项请看下方的`copy`配置项,复制功能仅能对以下的`content`
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`,并且实例化的时候传入该函数,那么该函数会返回内部的确定按钮和取消按钮的点击事件,否则确定按钮和取消按钮将会默认绑定关闭事件。
onMountedfunction否 null 该函数会在弹窗渲染并打开完成后执行   


相关插件-对话框,弹出层

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    yhjaichirou 0
    2023/4/1 22:00:02
    怎么前后弹两个框呢,现在只能同时弹一个框 回复
    周铭辉 0
    2022/8/15 9:47:40
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复