資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究HTML DOM Dialog 物件
HTML DOM Dialog 物件與 HTML5 的 <dialog> 元素相關聯。它用於在網頁上建立彈出視窗、模態框等。要檢視對話方塊並讓使用者與其互動，應設定 open 屬性值。
屬性
以下是 Dialog 物件的屬性：
| 屬性 | 描述 |
|---|---|
| open | 設定或返回對話方塊是否應開啟。 |
| returnValue | 設定或返回對話方塊的返回值。 |
方法
以下是 Dialog 物件的方法：
| 方法 | 描述 |
|---|---|
| close() | 關閉對話方塊。 |
| show() | 顯示對話方塊。 |
| showModal() | 使對話方塊成為最頂層的對話方塊並顯示它。 |
語法
以下是語法：
建立對話方塊物件：
var p = document.createElement("DIALOG");示例
讓我們來看一個 HTML DOM 對話方塊物件的示例：
<!DOCTYPE html>
<html>
<head>
<title>DIALOG OBJECT</title>
<style>
dialog{
border:2px solid blue;
font-weight:bold;
}
</style>
</head>
<body>
<p> Clicking on the button below will create a dialog element</p>
<button onclick="createDialog()">CREATE</button>
<script>
function createDialog() {
var dlg = document.createElement("DIALOG");
var dlgTxt = document.createTextNode("DIALOG WINDOW with a button");
var bl=document.createElement("BR");
var btn = document.createElement("BUTTON");
var btnText=document.createTextNode("CLICK HERE");
dlg.setAttribute("open", "open");
dlg.appendChild(dlgTxt);
dlg.appendChild(bl);
btn.appendChild(btnText);
dlg.appendChild(btn);
document.body.appendChild(dlg);
}
</script>
</body>
</html>輸出
這將產生以下輸出：
點選“建立”按鈕：
在上面的示例中：
我們首先建立了一個按鈕“建立”，當用戶點選它時，將執行 createDialog() 函式。
<button onclick="createDialog()">CREATE</button>
createDialog() 函式使用 createElement() 方法建立 <dialog> 元素。然後，它使用 createTextNode() 方法向其中新增一些文字。然後，我們使用 createElement() 方法在 <dialog> 元素內建立一個按鈕，並使用 createTextNode() 方法新增按鈕文字。
使用 setAttribute() 方法，我們將對話方塊的 open 屬性值設定為顯示給使用者。最後，對話方塊及其內部的按鈕使用 document.body appendChild() 方法附加到文件主體，並將 <dialog> 和 <button> 元素作為引數傳遞。
function createDialog() {
var dlg = document.createElement("DIALOG");
var dlgTxt = document.createTextNode("DIALOG WINDOW with a button");
var bl=document.createElement("BR");
var btn = document.createElement("BUTTON");
var btnText=document.createTextNode("CLICK HERE");
dlg.setAttribute("open", "open");
dlg.appendChild(dlgTxt);
dlg.appendChild(bl);
btn.appendChild(btnText);
dlg.appendChild(btn);
document.body.appendChild(dlg);
}
更新於： 2021年2月20日
385 次瀏覽
廣告