一、介绍

jsdialog 是一款轻量级 JavaScript 弹窗库，可用于创建各种类型的弹窗，如警告框、确认框、提示框、加载框等。它不依赖于 jQuery 或其他外部库，只需要引入一个 jsdialog.min.js 文件即可使用。它的使用也非常简单，只需要几行代码即可创建一个弹窗。

二、基本用法

使用 jsdialog 创建一个弹窗的基本代码如下：

<script src="jsdialog.min.js"></script>
<script>
  jsdialog.alert("Hello, world!");
</script>

上面的代码会创建一个包含 "Hello, world!" 文本的警告框弹窗。除了 alert() 方法，还有 confirm() 方法、prompt() 方法等用于创建不同类型弹窗的方法。

三、参数配置

使用 jsdialog 创建弹窗时，还可以通过传入不同的参数进行样式调整和功能扩展。

1. 标题和内容

默认情况下，弹窗的标题和内容是固定的，但可以通过传入相应参数进行修改：

<script>
  jsdialog.alert("Hello, world!", {title: "My Title", content: "My Message"});
</script>

上面的代码将创建一个标题为 "My Title"，内容为 "My Message" 的警告框弹窗。

2. 按钮

在默认情况下，弹窗只有一个确定按钮。但可以通过传入 buttons 参数进行扩展，例如：

<script>
  jsdialog.confirm("Are you sure?", {buttons: [
    {
      text: "OK",
      onClick: function() {
        alert("You clicked OK");
      }
    },
    {
      text: "Cancel"
    }
  ]});
</script>

上面的代码将创建一个确认框弹窗，包含一个 "OK" 按钮和一个 "Cancel" 按钮。"OK" 按钮的点击事件将弹出一个消息框。

3. 外观

警告框、确认框等弹窗的外观也可以通过传入不同的参数进行调整。例如，可以通过设置 className 参数来指定弹窗的 CSS 类：

<style>
  .red {
    background-color: red;
    color: white;
    border: 2px solid black;
    border-radius: 5px;
  }
</style>
<script>
  jsdialog.alert("Hello, world!", {className: "red"});
</script>

上面的代码将创建一个红色背景、黑色边框、白色文本的弹窗。

四、示例代码

下面是一个完整的 jsdialog 使用示例：

<meta charset="UTF-8">
<title>jsdialog示例</title>
<style>
  .my-dialog {
    background-color: #f8f8f8;
    border: 2px solid #ddd;
    border-radius: 5px;
    width: 400px;
  }
  .my-dialog .jsdialog-header {
    background-color: #ddd;
    padding: 10px;
    border-radius: 5px 5px 0 0;
  }
  .my-dialog h3 {
    margin: 0;
  }
  .my-dialog .jsdialog-body {
    padding: 20px;
  }
  .my-dialog .jsdialog-footer {
    text-align: right;
    padding: 10px;
    border-top: 1px solid #ddd;
    border-radius: 0 0 5px 5px;
  }
  .my-dialog .jsdialog-button {
    background-color: #007bff;
    border: 0;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
  }
  .my-dialog .jsdialog-button:hover {
    background-color: #0069d9;
  }
</style>
<button id="my-button">打开弹窗</button>
<script src="jsdialog.min.js"></script>
<script>
  var myButton = document.getElementById("my-button");
  myButton.addEventListener("click", function() {
    jsdialog.prompt("请输入您的姓名：", {
      title: "欢迎",
      content: "请输入您的姓名：",
      buttons: [
        {
          text: "确定",
          onClick: function(dialog, value) {
            alert("您好：" + value);
            dialog.close();
          }
        },
        {
          text: "取消"
        }
      ],
      className: "my-dialog"
    });
  });
</script>

jsdialog: 轻量级JavaScript弹窗库