<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jqueryUI/jquery-1.6.js" type="text/javascript"></script>
<script src="jqueryUI/jquery-ui.js" type="text/javascript"></script>
<link type="text/css" href="jqueryUI/jquery-ui.css" rel="stylesheet" />
<title>JSP Page</title>
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script type="text/javascript">
$(function(){
$( "#btn" ).button().click(function() {
$( "#dialog-confirm" ).dialog( "open" );
});
$( "#dialog-confirm" ).dialog({
autoOpen: false,
height:180,
modal: true,
buttons: {
"登录": function() {
$( this ).dialog( "close" );
$("#name").val("");
$("#pwd").val("");
},
"退出": function() {
$( this ).dialog( "close" );
}
}
});
})
</script>
</head>
<body>
<input type="button" value="登录" id="btn"></input>
<div id="dialog-confirm" title="用户登录">
用户名:<input type="text" style="width: 200px" id="name"><br>
密 码:<input type="text"style="width: 200px" id="pwd"><br>
</div>
</body>
</html>
JqueryUI登录窗体
最新推荐文章于 2021-04-22 21:57:11 发布