jquery.modal.js 是一個用于創建模態框的 JavaScript 庫。它可以幫助您在您的網站或應用程序中輕松地添加彈出窗口和模態框,以改善用戶體驗和增加交互性。
使用 jquery.modal.js 需要以下步驟:
// 引入 jquery 和 jquery.modal.js <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="path/to/jquery.modal.css"> <script src="path/to/jquery.modal.js"></script>
引入了 jquery 和 jquery.modal.js 之后,您可以使用以下代碼來創建模態框:
//創建一個基本的模態框 $.modal("Hello World!"); // 創建一個帶有標題的模態框 $.modal({ title: "提示", content: "是否保存?", buttons: [ { text: "保存", onClick: function() { console.log("保存"); } }, { text: "取消", onClick: function() { console.log("取消") } } ] });
通過傳遞一個包含選項的對象來創建模態框。選項包括:
- title: 模態框的標題
- content: 模態框的內容。可以是文本、HTML 或 DOM 元素。
- buttons: 模態框的按鈕。每個按鈕都有一個文本標簽和 onClick 回調函數。
使用 jquery.modal.js 可以輕松地在您的網站或應用程序中添加模態框和彈出窗口,以提高用戶體驗和交互性。