jQuery UI因此 jQuery 为根本的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、殊效和可改换主题的可视控件。
下面是一个以jQuery UI实现的弹出登录框功能，代码非常大略。
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset=\公众utf-8\"大众>
<link rel=\公众stylesheet\公众 href=\"大众css/bootstrap.css\"大众>
<link rel=\"大众stylesheet\"大众 href=\"大众css/jquery-ui.css\"大众>
</head>
<body>
<h1>jQueryUI：Widgets —— Dialog</h1>
<h3>弹出式对话框</h3>
<a id=\"大众btn-login\公众 class=\"大众btn btn-success\"大众 href=\公众#\公众>我要登录</a>
<div id=\"大众dialog-login\"大众 title=\公众用户登录\公众>
<form action=\"大众\"大众>
用户名：<input type=\"大众text\"大众><br>
密码名：<input type=\公众password\"大众><br>
</form>
</div>
<script src=\"大众js/jquery-1.11.3.js\"大众></script>
<script src=\公众JS/jquery-ui.js\"大众></script>
<script>
var $dialog=$(\公众#dialog-login\公众)
$dialog.dialog({
autoOpen:false,
modal:false,
show:{effect:\"大众blind\"大众,duration:1000},
hide:{effect:\"大众explode\"大众,duration:1000},
buttons:{
\公众登录\"大众:()=>setTimeout(()=>{
alert(\"大众登录成功\公众);
$dialog.dialog(\"大众close\"大众);
},1000),
\公众取消\"大众:()=>$dialog.dialog(\公众close\"大众)
},
close(){
$(\"大众form\公众).get(0).reset()
}
});
$(\"大众#btn-login\公众).click(()=>{
$dialog.dialog(\公众open\"大众)
})
</script>
</body>
</html>
