jsdialog: 輕量級JavaScript彈窗庫

一、介紹

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類：

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

上面的代碼將創建一個紅色背景、黑色邊框、白色文本的彈窗。

四、示例代碼

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

  
    
    
    
      
      
      
        .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;
        }
      
    
    
      打開彈窗

      <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彈窗庫，易於使用和擴展，可以創建各種類型的彈窗，並支持參數配置以滿足不同的需求。如果您在開發中遇到彈窗相關的功能需求，jsdialog可能是一個不錯的選擇。