0

ログイン/サインアップ用のポップアップウィンドウを作成したい。だから私はこのコードを書いた。 しかし、動作していません...

.css

#main_box
{
    border: 1px solid black;
    height: 300px;
    left: 34%;
    position: fixed;
    top: 32%;
    width: 300px;
}

#close_btn
{
    float: right;
}

#main_box
{
    display: none;
}

#box_a, #box_b
{
    float: left;
}

#box_a, #box_b, #box_c
{
    border: 1px solid black;
    height: 82px;
    width: 82px;
    margin: 10px;
}
</style>

.js

  <script type="text/javascript">
            $(document).ready(
        function () {
            $('#login_btn').click(
                    function () { $('#main_box').show(); }
                );       
            $('#forgt_p').click(
                    function () { $('#box_c').show(); }
                );    
            $('#close_btn').click(
                    function () { $('#main_box').hide(); }
                );
         }
         );
     </script>

.aspx

    <a href="javascript:;" id="login_btn">login</a>

    <div id="main_box">         

        <button id="close_btn" name="close">close</button>
        <div id="box_a">                      
            //////////////////////login code
        </div>

        <div id="box_b">
            //////////////////////signup code            </div>
        <div style="clear: left;"></div>
             <a href="javascript:;" id="forgt_p">forgot password</a>

        <div id="box_c">
             //////////////////////forgot password code
        </div>

</div>

また、エスケープを押したときにこれを閉じて、jqueryで可能な限りスムーズに動作できるようにします

4

1 に答える 1

0

ダイアログのような素晴らしいJQueryUIプラグインを検討する必要があります

たくさんのオプションを備えたCSSスタイルのダイアログボックスを作成できます。

$(function() {
    $( "#dialog-message" ).dialog({
        modal: true,
        buttons: {
            Ok: function() {
                $( this ).dialog( "close" );
            }
        }
    });
});
于 2012-10-26T06:55:35.000 に答える