<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#dg{width: 60%;text-align: center;}
#dg label{display: block;margin: 6px;}
::backdrop{background-color: black;}
</style>
<title>hello</title>
</head>
<body>
<input id="btn" type="button"value="打开对话框" />
<dialog id="dg">
<h2>用户登录</h2>
<main>
<form>
<label for="texName" value="用户名:"/>
<input type="text"id="txtName" />
</label>
<label for="txtPassword"value="密码:"/>
<input type="password"id="txtPassword"autofocus="" />
</label>
<input type="button" value="登录"/>
<input id="cls" type="button"value="关闭" />
</form>
</main>
</dialog>
<script>
var btn=document.getElementById("btn");
var dg=document.getElementById("dg");
var cls=document.getElementById("cls");
btn.οnclick=function(){
dg.showModal();
dg.returnValue='对话框的值';
}
cls.οnclick=function(){
dg.close();
console.log(dg.returnValue);
}
dg.console=function(){
console.log("对话框关闭");
}
dg.oncancel=function(){
console.log('用户在模拟窗口中按了esc键');
}
</script>
</body>
</html>
3907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
