使用zDialog插件,可以按照以下步驟進行:
<link rel="stylesheet" href="zDialog.css">
<script src="zDialog.js"></script>
<button id="openDialog">打開彈窗</button>
document.getElementById("openDialog").addEventListener("click", function() {
// 創建彈窗
var dialog = new zDialog({
title: "彈窗標題",
content: "彈窗內容",
width: "400px",
height: "200px",
buttons: [
{
text: "確定",
click: function() {
// 點擊確定按鈕的回調函數
console.log("點擊了確定按鈕");
dialog.close(); // 關閉彈窗
}
},
{
text: "取消",
click: function() {
// 點擊取消按鈕的回調函數
console.log("點擊了取消按鈕");
dialog.close(); // 關閉彈窗
}
}
]
});
// 打開彈窗
dialog.open();
});
在上述代碼中,首先通過new zDialog(options)
創建一個彈窗對象,其中options
是一個包含彈窗配置的對象。可以配置的參數包括:
title
:彈窗的標題content
:彈窗的內容width
:彈窗的寬度height
:彈窗的高度buttons
:彈窗的按鈕,是一個數組,每個按鈕對象包含text
(按鈕文本)和click
(點擊按鈕的回調函數)兩個屬性。然后,使用dialog.open()
打開彈窗,使用dialog.close()
關閉彈窗。
以上就是使用zDialog插件創建和控制彈窗的基本步驟。根據具體需求,可以通過配置參數和調用API來實現更豐富的功能。