一个简单但高度可定制的插件，用于创建漂亮、响应迅速、可主题化的警报/确认/提示对话框，其中包含漂亮的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图标：进度条图标

预览截图

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