JavaScript與ASP.NET圓舞曲之七: 用jQuery作一個登入對話窗

js忍之道 js原創

賽門 2012-07-20 16:51:13 ‧ 4750 瀏覽

分享至

雖然, ASP.NET已經有'登入'這個對話窗的工具存在了, 也能和IIS的帳號管理機制密切配合...

但強者一定會要自己練功....所以, 就來粗略介紹如何在jQuery的Dialog做一個只有外觀的登入對話窗...
廢話就不再多說.

開一個Web Form...輸入下列程式碼:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LoginDialog.aspx.cs" Inherits="WebTest.LoginDialog" %>



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>登入視窗</title>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
    <link href="Styles/css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />


    <form id="form1" runat="server">
        <div id="LoginForm" title="請登入...">
            <p id="login_tip"></p>
            <fieldset>
                帳號:<input type="text" name="Account" id="Account" class="text ui-widget-content ui-corner-all" />
                密碼:<input type="password" name="Password" id="Password" value="" class="text ui-widget-content ui-corner-all" />
            </fieldset>
        </div>
        <script type="text/javascript">
            $("#LoginForm").dialog({
                autoOpen: true,
                modal: true,
                buttons: {
                    登入: function () {
                        //登入帳密檢查
                        $(this).dialog("close");
                    },
                    取消: function () {
                        $(this).dialog("close");
                    }
                }
            })
        </script>
    </form>

執行效果如下: