一、介绍
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类：
<script>
jsdialog.alert("Hello, world!", {className: "red"});
</script>
上面的代码将创建一个红色背景、黑色边框、白色文本的弹窗。
四、示例代码
下面是一个完整的jsdialog使用示例：
jsdialog示例
<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>
