jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)

下面是对“jQuery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)”的完整攻略。

一、背景介绍

showInfoDialog()是基于jQuery的轻量级信息弹窗插件，可用于显示成功、错误、警告和通知信息，并带有背景遮罩效果，可自定义样式，非常方便实用。

二、使用步骤

1. 引入jQuery和showInfoDialog

使用showInfoDialog前需要先引入jQuery和showInfoDialog的文件。

<!-- 引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入showInfoDialog -->
<script src="./js/showInfoDialog.js"></script>

2. 创建HTML模板

弹出框的HTML模板如下：

<div class="show-info-dialog-mask"></div>
<div class="show-info-dialog-wrap">
  <div class="show-info-dialog">
    <div class="show-info-dialog-header">Title</div>
    <div class="show-info-dialog-content">
      <div class="show-info-dialog-icon"></div>
      <div class="show-info-dialog-text">Content</div>
    </div>
  </div>
</div>

3. 调用showInfoDialog

调用成功弹窗

$(".btn-success").click(function(){
  $.showSuccessDialog("操作成功!");
})

调用错误弹窗

$(".btn-error").click(function(){
  $.showErrorDialog("操作失败!");
})

调用警告弹窗

$(".btn-warning").click(function(){
  $.showWarningDialog("警告信息！");
})

调用通知弹窗

$(".btn-notice").click(function(){
  $.showNoticeDialog("提示信息！");
})

调用带图标弹窗

$(".btn-icon").click(function(){
  $.showInfoDialog({
    title: "自定义图标弹窗",
    content: "自定义内容，自定义颜色",
    iconClass: "custom-icon",
    iconColor: "#ffc150",
    mask: true,
    maskColor: "#000",
    duration: 2000
  });
})

4. 参数说明

可通过传入以下参数实现自定义样式。
| 参数 | 类型 | 样例 | 解释 |
| ---- | ---- | ---- | ---- |
| title | string | 操作成功 | 弹窗标题 |
| content | string | 操作成功！ | 弹窗内容 |
| iconClass | string | success-icon | 弹窗图标类名 |
| iconColor | string | #43A047 | 弹窗图标颜色 |
| mask | boolean | true | 是否显示背景遮罩 |
| maskColor | string | rgba(0, 0, 0, 0.5) | 遮罩颜色 |
| duration | int | 2000 | 弹窗显示时间 |

5. 完整示例

此示例展示了如何创建自定义样式的弹窗，以及使用自定义的图标和颜色的方法。

<button class="btn btn-icon">自定义样式的弹窗</button>

$(".btn-icon").click(function(){
  $.showInfoDialog({
    title: "自定义图标弹窗",
    content: "自定义内容，自定义颜色",
    iconClass: "custom-icon",
    iconColor: "#ffc150",
    mask: true,
    maskColor: "#000",
    duration: 2000
  });
})

以上就是“jQuery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)”的完整攻略。