微小警报对话框和Toast通知插件 jQuery MSalert

  • 源码大小:8.77KB
  • 所需积分:1积分
  • 源码编号:19JP-3601
  • 浏览次数:361次
  • 最后更新:2023年07月01日
  • 所属栏目:其他
本站默认解压密码:19jp.com 或 19jp_com

简介

一个轻量级的jQuery弹出插件,用于创建可定制的、看起来很棒的提醒/确认对话框和toast通知,而不会破坏您网站的现有设计

如何使用它:

1.要开始,请包括微软警报.js脚本加载后最新的jQuery库。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/MSalert.js"></script>

2.创建一个基本警报对话框。

MSalert.principal({
  
  // 'gear', 'error', 'warning', 'success'
  icon:'warning', 

  // dialog title
  title: 'Are You Sure',

  // dialog content
  description: 'Are you sure to delete this entry?',

  // footer content
  extra: 'Check Out the Console Log (F12)',

})

3.创建一个确认对话框,该对话框将根据用户选择返回true或false。

MSalert.principal({

  // 'gear', 'error', 'warning', 'success'
  icon:'warning', 

  // dialog title
  title: 'Are You Sure',

  // dialog content
  description: 'Are you sure to delete this entry?',

  // footer content
  extra: 'Check Out the Console Log (F12)',

  // enable confirm/cancel buttons
  button: true, 

}).then(result =>{
  console.log('Result Promise', result)
})

4.创建受材料设计启发的toast通知,该通知将在超时后自动取消。

MSalert.alerta({

  // append the notification to this container
  id:'container',

  // toast message
  text : 'Success Message',

  // 'up', 'down', or 'right'
  position: 'right', 

  // 'success', 'warning', or 'error'
  status: "success",

  // auto dimiss after 3 seconds
  duration: 3000,
  
})

预览截图