漂亮 响应模式对话框插件 jQuery XSAlert

  • 源码大小:185.96KB
  • 所需积分:1积分
  • 源码编号:19JP-3543
  • 浏览次数:564次
  • 最后更新:2023年06月24日
  • 所属栏目:幻灯片
本站默认解压密码:19jp.com 或 19jp_com

简介

一个简单但高度可定制的插件,用于创建漂亮、响应迅速、可主题化的警报/确认/提示对话框,其中包含漂亮的CSS3动画。

它旨在取代本地JavaScript弹出功能,以提高可访问性。提供了7个内置主题,使插件开箱即用。

如何使用它:

1.下载并加载xsalert.jsjQuery库之后的脚本。

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

2.在文档中加载您选择的主题。

<link rel="stylesheet" href="src/themes/blue-theme.css" />
<link rel="stylesheet" href="src/themes/brown-theme.css" />
<link rel="stylesheet" href="src/themes/dark-theme.css" />
<link rel="stylesheet" href="src/themes/flat-theme.css" />
<link rel="stylesheet" href="src/themes/light-theme.css" />
<link rel="stylesheet" href="src/themes/purple-theme.css" />
<link rel="stylesheet" href="src/themes/red-theme.css" />

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

XSAlert({
  title: 'Alert Title',
  message: 'Any HTML Content Here',
})

4.创建一个带有自定义操作按钮的确认对话框。

XSAlert({
  title: 'Confirm Dialog',
  message: "A Custom Confirm Dialog",
  okButtonText: 'OK',
  cancelButtonText: "Cancel",
  thirdButtonText: "Another Button",
}).then((result) => {
  if(result == 'ok') { 
    // do something
  } else if (result == 'third') { 
    // do something
  }
})

5.创建一个提示对话框。

XSAlert({
  title: "Prompt Dialog",
  message: "What's your name",
  inputType: 'text',
  inputPlaceholder: 'Ex: jQueryScript',
  cancelButtonText: 'Cancel'
}).then((result) => {
  if(result == 'ok'){
    if($('#xs-input').val() == '') { 
      // do something
    } else { 
      //  do something 
    }
  } else if(result == 'cancel' || result == 'outside'){ 
    // do something
  }
})

6.所有默认插件选项。

  • 偶像:自定义图标:“错误”、“赞”、“通知”、“问题”、“成功”、“拇指向下”、“大拇指向上”、“警告”或“Custom.png”
  • 标题:警报标题
  • 标题颜色:标题颜色
  • 标题字体大小:字体大小
  • title字体系列:字体系列
  • 消息:警报消息
  • 消息颜色:消息颜色
  • 消息字体大小:字体大小
  • messageFont系列:字体系列
  • 职位:“居中”(默认)、“左上角”、“右上角”和“左下角”
  • 动画:“放大中心”(默认值)、“放大顶部”、“放大底部”、“滑动顶部”、”滑动底部“、”水平果冻“、”垂直果冻“、“果冻对角线”、”旋转顶部“、”向上旋转“、”向下旋转“、“水平向上旋转”、“垂直向上旋转比例”、“向内模糊”、“水平摇动”、“左右摇动”、”反弹顶部“
  • ok按钮文本:“确认”按钮的文本
  • 取消按钮文本:“取消”按钮的文本
  • 第三个按钮文本:第三个按钮的文本
  • ok按钮背景颜色:背景颜色
  • ok按钮文本颜色:文本颜色
  • 取消按钮背景颜色:背景颜色
  • 取消按钮文本颜色:文本颜色
  • 第三个按钮背景颜色:背景颜色
  • 第三个按钮文本颜色:文本颜色
  • hideOk按钮:隐藏“确认”按钮
  • 隐藏取消按钮,:隐藏“取消”按钮
  • 按钮边框半径:边界半径
  • 关闭OnOutside单击:单击外部时关闭对话框
  • 关闭ESC:按ESC键关闭对话框
  • 背景颜色:背景颜色
  • 边框尺寸:边框大小
  • 边框颜色:边框颜色
  • 边框半径:边界半径
  • 按钮左侧:显示左侧的按钮
  • 按钮右侧:显示右侧的按钮
  • 方框阴影:长方体阴影
  • overlayImageURL:背景图像
  • 页脚:页脚内容
  • 输入类型:'text', 'email', 'url', 'password', 'textarea', 'select', 'datetime-local', 'date', 'file', 'number', 'range', 'checkbox'
  • 输入占位符:占位符文本
  • 输入值:默认输入值
  • 输入属性:输入属性
  • 图像URL:将图像附加到对话框
  • 图像宽度:图像宽度
  • 图像高度:图像高度
  • 自动关闭计时器:超时后自动关闭
  • 隐藏进度栏:隐藏进度条
  • hideProgress图标:进度条图标

预览截图