資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中在 alert/confirm 框中顯示影像？
在本教程中，我們將學習如何在 JavaScript 中在 **alert** 或 **confirm 框** 中顯示影像。**alert()** 是 JavaScript 方法，當您呼叫它時，它會在螢幕頂部中央顯示alert 或確認框。
作為程式設計師和使用者，您在許多網站上都看到過，在您刪除使用者帳戶中的任何寶貴內容之前，他們會要求您確認。此外，當用戶進入網頁或顯示訊息時，alert 框也可能有助於顯示一些資訊。
因此，預設的 alert 框只能包含您在呼叫時作為引數傳遞給alert() 方法的文字以及預設提供的“確定”按鈕。
為了使 **UI 更具吸引力**，我們需要在 alert 框中新增圖示和影像。但是，JavaScript alert() 方法不支援影像。在這裡，我們可以有兩個解決方案來實現我們的目標
- 在 JavaScript 中建立自定義 alert 框。
- 使用 jQuery 對話方塊。
在 JavaScript 中建立自定義 Alert 框
在這種方法中，我們將從頭開始構建對話方塊框。我們可以建立一個 alert div 並向其中新增內容。之後，我們可以將 alert div 的位置設定為螢幕頂部中央，就像普通的 alert 框一樣，並根據使用者想要顯示或隱藏對話方塊框的意願更改顯示。
語法
您可以按照以下語法來實現該方法並從頭開始建立對話方塊框。
<script>
var alertDiv = document.getElementById("alert");
// to show alert box change display
function invokeAlert() {
alertDiv.style.display = "block";
}
// to hide alert box, make display none using JavaScript
function closeDialog() {
alertDiv.style.display = "none";
}
</script>方法
首先，我們將建立一個用作對話方塊框的單個 div，並將影像和其他內容新增到該對話方塊 div 中。
之後，我們將建立一個顯示對話方塊按鈕，當用戶點選該按鈕時，我們將呼叫更改對話方塊框顯示的函式。
此外，我們在對話方塊框內添加了關閉按鈕，當用戶點選該按鈕時，它將呼叫一個 JavaScript 函式將對話方塊 div 的顯示更改為 none。
示例
在本例中，我們將按照上述步驟建立一個自定義對話方塊框。
<html>
<head>
<title> Add image to alert / confirmation box. </title>
</script>
<style>
#alert {
display: none;
background-color: lightgrey;
border: 1px solid green;
position: fixed;
width: 250px;
left: 45%;
top: 2%;
padding: 6px 8px 8px;
text-align: center;
}
img {
width: 10rem;
height: 10rem;
}
button {
border-radius: 12px;
height: 2rem;
padding: 10px;
cursor: pointer;
border: 2px solid green;
background-color: aqua;
}
</style>
</head>
<body>
<h2> Add image to alert / confirm box. </h2>
<h4> Creating custom dialog box using JavaScript. </h4>
<div id = "alert">
<p> Welcome to the tutorialsPoint! </p>
<img src="https://tutorialspoint.tw/python_pillow/images/tutorials_point.jpg" alt="tutorialsPoint"> </img>
<button id="close" onclick="closeDialog()"> Close </button>
</div>
<button onclick='invokeAlert();'> Show alert </button>
<script>
var alertDiv = document.getElementById("alert");
function invokeAlert() {
alertDiv.style.display = "block";
}
function closeDialog() {
alertDiv.style.display = "none";
}
</script>
</body>
</html>使用 jQuery dialog() 方法
**jQuery** 是 JavaScript 庫，也是 JavaScript 的高階版本。jQuery 包含dialog() 方法，其工作方式類似於 JavaScript 的alert() 方法。
語法
您可以按照以下語法在 JQuery 對話方塊中使用影像。
<script>
// convert div as a dialog
$(function () {
$("#div_Id").dialog();
});
</script>
<div id="imgInDialog" title="Alert Box">
<img src="" />
</div>引數
**div_Id** - 它是您已向其中新增影像並希望使用 jQuery dialog() 方法將其轉換為對話方塊框的 div 的 id。
示例
在下面的示例中，我們建立了 div 以在對話方塊框中顯示它，並在其中添加了一個影像。之後，使用 jQuery，我們使用 div id 訪問了 div 併為該 div 呼叫了 dialog() 方法，該方法將 div 轉換為對話方塊框。
此外，我們還在<head> 標記中添加了 jQuery CDN 以用於對話方塊框的樣式。我們添加了一些樣式以使預設對話方塊框更具吸引力。
<html>
<head>
<title> Add image to alert / confirmation box. </title>
<!-- jquery CDN for dialog boxes -->
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background: lightgreen;
color: blue;
font-size: 20px;
}
#dialog {
text-align: center;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2> Add image to alert / confirmation box.</h2>
<h4> Show image in the dialog box using the jQuery dialog() method. </h4>
<!-- content of the dialog box. -->
<div id = "imgInDialog" title = "Alert Box">
<p> Welcome to the tutorialsPoint! </p>
<img src="https://tutorialspoint.tw/python_pillow/images/tutorials_point.jpg" alt="tutorialsPoint" />
</div>
<script>
// open the imgInDialog div in the dialog box.
$(function () {
$("#imgInDialog").dialog();
});
</script>
</body>
</html>在輸出中，使用者可以在包含影像和歡迎訊息的對話方塊框中看到 div。
結論
在本教程中，我們學習了兩種在 alert 或確認框中顯示影像的方法。第二種方法優於第一種方法，因為我們需要編寫更少的程式碼行。如果使用者希望使對話方塊框更高階，他們可以使用第一種方法，因為他們可以為對話方塊框提供更好的樣式。
4K+ 次瀏覽
