資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用JavaScript設計自定義警告框？
在本教程中，我們將使用JavaScript建立一個自定義警告框。警告框是指一個帶有訊息的框，每當你點選按鈕時就會出現。如果我們新增一些樣式並根據我們的需求對其進行修改，那麼它將成為一個自定義警告框。
使用JavaScript設計自定義警告框的方法
要建立自定義警告框，我們將使用jQuery庫，該庫用於簡化HTML DOM操作，並且還為我們提供了更好的事件處理和CSS動畫與JavaScript的結合使用。jQuery將許多程式碼行封裝到一個單一方法中，該方法可用於僅使用一行簡單的程式碼執行許多小的任務。
因此，要建立自定義警告框，我們需要使用HTML、CSS和JavaScript編寫程式碼。
設計HTML部分
讓我們從HTML程式碼開始
編寫HTML程式碼以建立自定義警告框的步驟：
建立一個script標籤，並將jQuery檔案連結到程式碼中，以便我們可以使用其方法。
建立一個id名為“ready”的div標籤。
在div標籤內建立另一個類名為“message”的div標籤，它將包含我們想要在警告框中列印的訊息。
現在使用button標籤建立一個類名為btn的按鈕。
最後，在div標籤之外建立一個input type按鈕，它將用於呼叫名為“myfunction”的函式。
新增JavaScript
現在我們將編寫JavaScript部分，它將為警告框的後端提供支援。
編寫JavaScript程式碼以建立自定義警告框的步驟：
定義上面宣告的函式myfunction，並在其中宣告兩個引數。
建立一個名為box的變數來呼叫div的id。
現在，我們將使用text()方法在框內顯示訊息。
在此步驟中，unbind()方法將移除所有事件處理程式，並在單擊“確定”按鈕時隱藏警告框。
在最後一步中，將使用click()方法來處理警告訊息。
新增CSS
現在我們將編寫CSS程式碼來為警告框提供樣式。
編寫CSS程式碼以建立自定義警告框的步驟如下：
首先，我們將設定整個div標籤“ready”（即我們的警告框）的樣式。
對於警告框，我們將提供背景顏色、邊距、填充、位置、邊框和大小。
現在將設定警告框內按鈕的樣式，為其提供顏色、邊距、圓角、邊框和寬度。並將文字對齊到中心。
最後，透過對齊文字，為警告框中的文字提供樣式。
示例
我們可以使用以下程式碼建立一個自定義警告框：
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id = "ready">
<div class = "message"> Hello. I am JavaScript </div>
<button class = "btn">OK</button>
</div>
<input type = "button" value = "Click Me" onclick = "myfunction();"
/>
</body>
<head>
<script>
function myfunction(note, done) {
var box = $("#ready");
box.find(".message").text(note);
box.find(".btn").unbind().click(function() {
box.hide();
});
box.find(".btn").click(done); box.show();
}
</script>
<style>
#ready {
display: none;
background-color: #f10044;
border: 1px solid #aaa;
position: fixed;
width: 250px;
left: 50%;
margin-left: -100px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#ready button {
background-color: #00ff56;
display: inline-block;
border-radius: 50%;
border: 1px solid #aaa;
padding: 5px;
text-align: center;
width: 80px;
cursor: pointer;
}
#ready .message {
text-align: center;
}
</style>
</head>
</html>
將出現一個按鈕，當您單擊它時，警告框將出現在螢幕上，當您單擊警告框中的“確定”按鈕時，該框將消失。
為了使警告框更有效，我們還可以新增更多按鈕，例如一個用於“是”另一個用於“否”，或者我們可以提供多個訊息，以及透過連線兩個框之間的按鈕將一個警告框連結到另一個警告框。可以透過提供背景顏色和其他動畫效果來更好地裝飾訊息。
注意：要建立自定義警告框，我們還可以使用 SweetAlert 庫檔案，該檔案提供一個 CDN 檔案來啟用 Swal.fire() 方法。
12K+ 瀏覽量
