数据结构
网络
关系型数据库管理系统
操作系统
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 次浏览
广告