<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>login test</title> <link rel="stylesheet" type="text/css" href="scripts/miniui/themes/blue/skin.css"> <script src="scripts/boot.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ mini.parse(); var loginWindow = mini.get("loginWindow"); loginWindow.show(); }); $("#login").click(function(){ var name = mini.get("username").getValue(); var password = mini.get("pwd").getValue(); if(name==""){ $("#msg").text("用户名不能为空!"); return; } if(password==""){ $("#msg").text("密码不能为空!"); return; } $("#myform").submit(); }); }); </script> </head> <body> <div><a href="javascript:void(0);" id="btn" class="mini-button">登录</a></div> <div id="loginWindow" class="mini-window" title="用户登录" style="350px;height:180px;" > <div id="loginForm" style="padding:15px;padding-top:10px;"> <form action="#" method="post" id="myform"> <table > <tr> <td style="60px;">帐号:</td> <td> <input id="username" name="username" class="mini-textbox" required="true" style="150px;"/> </td> </tr> <tr> <td style="60px;">密码:</td> <td> <input id="pwd" name="pwd" class="mini-password" required="true" style="150px;" /> <a href="#" >忘记密码?</a> </td> </tr> <tr> <td></td> <td style="padding-top:5px;"> <a class="mini-button" style="60px;" id="login">登录</a> <a class="mini-button" style="60px;">重置</a> </td> </tr> <tr> <td></td> <td style="padding-top:5px;"> <span style="color:#FF0000;" id="msg"></span> </td> </tr> </table> </form> </div> </div> </body> </html>
效果: