資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在JavaScript的警告/確認框中顯示圖片？
在本教程中，我們將學習如何在JavaScript的警告或確認框中顯示圖片。alert()是JavaScript方法，當您呼叫它時，它會在螢幕頂部中央顯示警告或確認框。
作為程式設計師和使用者，您在許多網站上都看到過，在您刪除使用者帳戶中的任何重要內容之前，它們都會要求您確認。此外，當用戶進入網頁或顯示訊息時，警告框也很有用。
因此，預設的警告框只能包含您在呼叫alert()方法時作為引數傳遞的文字和一個預設提供的“確定”按鈕。
為了使UI更具吸引力，我們需要在警告框中新增圖示和圖片。但是，JavaScript的alert()方法不支援圖片。這裡，我們可以採用兩種方法來實現我們的目標
- 在JavaScript中建立自定義警告框。
- 使用jQuery對話方塊。
在JavaScript中建立自定義警告框
在這種方法中，我們將從頭開始構建對話方塊。我們可以建立一個警報div並將內容新增到其中。之後，我們可以將警報div的位置設定在螢幕頂部中央，就像普通的警報框一樣，並根據使用者想要顯示或隱藏對話方塊的需求更改顯示。
語法
您可以按照以下語法來實現該方法並從頭開始建立對話方塊。
<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。
結論
在本教程中，我們學習了兩種在警告或確認框中顯示圖片的方法。第二種方法比第一種方法更好，因為我們需要編寫更少的程式碼行。如果使用者想要使對話方塊更高階，他們可以使用第一種方法，因為他們可以為對話方塊提供更好的樣式。
4K+ 次瀏覽
