Jquery UI 中的dialog的简单使用

html代码:

<link rel="stylesheet" href="JqueryUI/jquery-ui-1.9.2.min.css" />
<script type="text/javascript" src='jquery-1.8.2.min.js'></script>
<script type="text/javascript" src='JqueryUI/jquery-ui-1.9.2.min.js'></script>

<div id="main">
    <div id="login">
        <form action="index.php" method="post">
            <input type="text" name="username" class='input-big'/>
            <input type='submit' name='submit' value='提交' class='loginbg'/>
        </form>
    </div>
</div>
<div id='dialog'></div>

JS代码:
window.onload = function(){
    
    //登录验证
    $('input[name=submit]').hover(function () {
        $(this).addClass('tologin');
    }, function () {
        $(this).removeClass('tologin');
    }).click(function () {
        var uname = $('input[name=username]');
        if (uname.val() == '') {
            dialog(uname, '用户名不能为空');
            return false;
        }
    });
};
//jQueryUI Dialog
function dialog (obj, msg) {
    $('#dialog').html(msg).dialog({
        title : 'HDSHOP 提示：',
        modal : true,
        show : 'shake',
        hide : 'explode',
        buttons : [{
            text : 'OK',
            click : function () {
                obj.focus();
                $(this).dialog('close');
            }
        }]
    });
}