JQ登录(模态框，jq-ui)

来源：互联网发布：知乎登录过于频繁编辑：程序博客网时间：2024/05/18 00:09

<!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>

模态框：有遮罩层，并且弹出时不能点击页面其他元素

阅读全文

0 0