從多個方面詳細闡述JS提示框

一、提示框的作用

JS提示框（即彈出框）是Web開發中經常用到的一種界面元素，通常用於提示用戶進行某些操作或者告知用戶當前的狀態。

使用提示框可以讓用戶更加易於理解，且提升用戶體驗。調用提示框通常會先調用window對象，它是所有瀏覽器的頂層對象。而關於JS提示框，最常用的就是window.alert()方法了。

window.alert("Hello world!");

這行代碼將會彈出一個包含「Hello world!」文本的提示框。

二、常用的JS提示框類型

除了window.alert()方法，還有許多其他類型的提示框可供選擇。

1. window.confirm()

confirm()方法會彈出提示框，告知用戶需要進行確認，通常用於確認用戶是否要繼續進行某項操作。它返回一個布爾值，確認(true)或取消(false)。

if (window.confirm("Do you really want to leave this page?")) {
  window.location.href = "https://www.example.com";
} else {
  console.log("Stay on this page.");
}

這個例子中，如果用戶按下確定按鈕，則跳轉到給定頁面；否則，控制台將會輸出 “Stay on this page.” 。

2. window.prompt()

prompt()方法彈出一個對話框，要求用戶輸入文本。該方法有兩個參數：第一個是一個文本字符串，告訴用戶該輸入什麼；第二個參數是一個默認字符串值。

var name = window.prompt("Please enter your name:", "Your Name");
console.log(name);

這個例子中，彈出對話框要求用戶輸入姓名，如果用戶沒有輸入，則默認為 “Your Name”。輸入完成後，將姓名存儲在變量 ‘name’ 中，並輸出到控制台。

3. 自定義提示框

除了上述兩種方法外，我們還可以通過自定義提示框，在更全面的方面完善我們的提示框。自定義提示框最常見的方法就是使用第三方庫，例如SweetAlert2。

swal({
  title: "Are you sure?",
  text: "You won't be able to revert this!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});

這個例子中，使用了 SweetAlert2 庫來創建一個更加詳細的提示框。這個提示框允許用戶逐一確認是否要刪除文件。

三、JS提示框的樣式定製

默認的JS提示框樣式可能難以滿足我們項目的要求。為了滿足 定製化 的需求，我們需要一些更高級的技術。

1. CSS樣式

最基礎、最常用的一種方法就是自定義CSS樣式。

.alert {
  padding: 10px;
  border: 1px solid #fcc;
  background-color: #ffe;
  color: #f00;
}

這個例子中，我們創建了一個名為 “alert” 的類。這個類定義了提示框的邊框、背景色和文本顏色。

2. JavaScript添加樣式

使用JavaScript動態添加樣式通常是一個更加靈活的方法，但是需要注意的是，這將會增加項目的複雜性。

var style = document.createElement('style');
style.innerHTML = '.alert { padding: 10px; border: 1px solid #fcc; background-color: #ffe; color: #f00; }';
document.head.appendChild(style);

這個例子中，我們創建了一個名為 “alert” 的類，通過創建一個 ‘style’元素並將其添加到文檔頭部來添加CSS樣式。

3. 使用自定義提示框庫

除了上述兩種方法外，我們還可以使用自定義提示框庫，例如 SweetAlert2。

swal({
  title: "Custom CSS!",
  text: "Here's some custom CSS code for the SweetAlert2 prompt.",
  icon: "success",
  customClass: {
    container: 'my-swal',
    confirmButton: 'my-swal-button'
  }
});

這個例子中，我們使用了 SweetAlert2 庫提供的 “customClass” 參數，並設置了 “container” CSS類和 “confirmButton” CSS類。這些類將被應用於彈出框元素。

四、JS提示框的使用技巧

除了上述的樣式定製和類型選擇，還有一些使用技巧可以幫助我們更好的使用JS提示框。

1. 隊列調用

默認情況下，每次調用JS提示框只能顯示一個。但是，我們可以使用隊列調用來依次顯示多個提示框。

var stack = ['Hello', 'world', 'how', 'are', 'you', '?'];
function showAlert() {
  if (stack.length) {
    window.alert(stack.shift());
    setTimeout(showAlert, 1000);
  }
}
showAlert();

這個例子中，我們使用了一個隊列來存儲要顯示的文本，並重複調用window對象中的alert()方法來循環彈出隊列中的文本。setTimeout()函數用於在兩次彈出之間添加一定的延遲。

2. 在網頁加載時運行

有時，我們需要在加載網頁時運行JS提示框代碼。

window.onload = function() {
  window.alert("The page has loaded!");
};

這個例子中，我們將window.alert()方法添加到window.onload()事件處理程序中。這意味着一旦頁面加載完畢，彈出框就會立即出現。

3. 自定義超時時間

在默認情況下，JS提示框將一直顯示直到用戶點擊「確定」，或者使用 confirm() 方法，一直顯示直到用戶點擊 「確定」 或 「取消」。但是，有時候我們需要強制提示框關閉。

var timeoutID = setTimeout(function() {
  window.alert("This message will self-destruct in 5 seconds.");
}, 5000);
function clearAlert() {
  window.clearTimeout(timeoutID);
}

這個例子中，我們使用了 setTimeout() 函數來隔一定的時間彈出一個提示框。setTimeout() 函數將其唯一的引用存儲在變量timeoutID中。隨後，我們使用window.clearTimeout() 方法在任何時候取消JS提示框。

五、總結

JS提示框是Web開發中極其常見的元素，我們可以通過選擇不同類型的提示框、自定義樣式、使用技巧等方法，使得我們的項目更加完美和專業。然而，在使用JS提示框的地方，我們需要始終記住一點：一定要考慮用戶體驗，並儘可能的避免過多的佔用用戶時間和耐性。