html open属性,Dialog open 属性 定义和用法_HTML对象

Dialog open属性

示例代码

打开对话窗口:

document.getElementById("myDialog").open = true;

代码片段：

点击按钮打开对话窗口

点我

注意：  目前只有Chrome Canary，Safari 6 浏览器支持 元素。

这是一个对话窗口

function myFunction(){

document.getElementById("myDialog").open = true;

}

演示一下 ?

一、定义和使用方法

open 属性用于设置或者返回对话窗口是否打开。

该属性反映了 open 属性。

如果指定了该属性，及说明对话窗口是可用的， 用户可以与它进行交互。

注意： 元素是 HTML5 新增的。

基于官方的例子修改了一下，文档里有说明是dialog的示例代码，因此可以使用$refs来访问：

mounted() {

this.$refs.dialog.open();

setTimeout(() => {

this.$refs.dialog.close();

}, 2000);

}

二、浏览器支持

注意： 目前只有Chrome Canary，Safari 6 浏览器支持 open 属性。

注意： 即便 Chrome Canary 支持 元素 ， 你必须在Chrome地址栏中打开 chrome://flags 并开启 "Enable experimental Web Platform features" 标记。 在开启后，你需要重启Chrome浏览器。

三、Dialog open语法

返回 open 属性：

dialogObject.open

设置 open 属性：

dialogObject.open=true|false

在 ready 中设置按钮的点击事件

$(function() {

// 初始化

$("#btn").click(function() {

alert("btn 被点击啦！");

}

);

四、Dialog open属性值值描述

true|false指定对话窗口是否打开true - 对话窗口是打开的

false - 默认。对话窗口是关闭。

五、技术细节返回值：布尔值，如果对话窗口是打开的返回TRUE，否则返回 FALSE。

六、Dialog open示例代码

示例代码

查看对话窗口是否打开：

var x = document.getElementById("myDialog").open;x输出结果为：

true

点击按钮查看对话窗口是否打开。

点我

注意:目前只有Chrome 37+, Safari 6+ 和 Opera 24+ 浏览器支持 dialog 元素。

这是一个打开的对话窗口

function myFunction() {

var x = document.getElementById("myDialog").open;

document.getElementById("demo").innerHTML = x;

}