<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8">
<link href="../jquery-ui.css" rel="stylesheet">
<style>
#dialog-login{
display: none;
}
</style>
</head>
<body>
<h1>jQueryUI：Widgets —— Dialog</h1>
<h3>弹出式对话框</h3>
<a href="#" id="btnLogin">我要登录</a>
<div id="dialog-login" title="用户登录">
<form action="">
用户名：<input type="text" name="uname"><br>
密码名：<input type="password" name="upwd"><br>
</form>
</div>
<script src="../external/jquery/jquery.js"></script>
<script src="../jquery-ui.js"></script>
<script>
var $txtName=$("[name=uname]"),
$txtPwd=$("[name=upwd]"),
$loginDialog=$("#dialog-login");
$formLogin=$("form");
$loginDialog.dialog({
autoOpen:false,
modal:true,
show:{effect:"blind",duration:1000},
hide:{effect:"explode",duration:1000},
buttons:{
"登录":()=>{
}
},
close(){//以任何手段关闭对话框时，自动触发！
//清空表单内容
/*$txtName.val("");
$txtPwd.val("");*/
$formLogin[0].reset();
}
});
$("#btnLogin").click(()=>{
$loginDialog.dialog("open");
})
</script>
</body>
</html>
模态框：有遮罩层，并且弹出时不能点击页面其他元素
3182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
