0

アプリケーションでfancybox（http://fancyapps.com）を使用しています。私はこのように定義されたdivを持っています：

 <div id="dialog-user-login" title="User Login" style="display: none" class="popup-dv">
            <div id="myDivID7">
                <div class="up-content">
                    Your Contents SHow HERE
                    <input id="txtUserName" name="txtUserName" class="normal" type="text" /><br />
                    <input id="txtpassword" name="txtUserName" class="normal" type="password" /><br />
                </div>
                <div class="social-icons">
                    <img src="wp-content/themes/touch/images/twit-icon.png" width="65" height="22">
                    <img src="wp-content/themes/touch/images/face-icon.png" width="65" height="22">
                </div>
            </div>
        </div>

私はこれらのファイルを含めました：

<script src="../../Content/FancyBox/jquery-1.9.0.min.js" type="text/javascript"></script>
    <link href="../../Content/FancyBox/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script src="../../Content/FancyBox/jquery.fancybox.js" type="text/javascript"></script>

このコードを使用する

 $(document).ready(function () {

            $("a#fancyBoxLink1").click();

});

1）ファンシーボックスが表示されますが、オーバーレイをクリックすると閉じます。2）。次のコードを使用すると、機能しません。

 $("a#fancyBoxLink1").fancybox({
            'href': '#myDivID1',
            'titleShow': false,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic'
        });

このhtmlで：

<a href="#myDivID1" class="mrgn-ao" id="fancyBoxLink1">
        <div id="dialog-user-login" title="User Login" style="display: none" class="popup-dv">
            <div id="myDivID7">
                <div class="up-content">
                    Your Contenssssssssssssssssssssssssssssssssssssssssssssssssssst SHow HERE
                    <input id="txtUserName" name="txtUserName" class="normal" type="text" /><br />
                    <input id="txtpassword" name="txtUserName" class="normal" type="password" /><br />
                </div>
                <div class="social-icons">
                    <img src="wp-content/themes/touch/images/twit-icon.png" width="65" height="22">
                    <img src="wp-content/themes/touch/images/face-icon.png" width="65" height="22">
                </div>
            </div>
        </div>
        </a>

私のコードの何が問題なのか教えてください。

4

1 に答える 1

0

<head>次のコードを追加する必要があります。

<script>
$(document).ready(function() {
$("#fancyBoxLink1").fancybox({
'titleShow': false,
'transitionIn': 'elastic',
'transitionOut': 'elastic'
});
});
</script>

コード<body>について:

<a href="#dialog-user-login" class="mrgn-ao" id="fancyBoxLink1">
<div id="dialog-user-login" title="User Login" style="display: none;width:500px;" class="popup-dv">
<div id="myDivID7">
<div class="up-content">
Your Contenssssssssssssssssssssssssssssssssssssssssssssssssssst SHow HERE
<input id="txtUserName" name="txtUserName" class="normal" type="text" /><br />
<input id="txtpassword" name="txtUserName" class="normal" type="password" /><br />
</div>
<div class="social-icons">
<img src="wp-content/themes/touch/images/twit-icon.png" width="65" height="22">
<img src="wp-content/themes/touch/images/face-icon.png" width="65" height="22">
</div>
</div>
</div>
</a>

href - これは pop-up-div のリンクです

于 2013-01-28T12:26:48.027 に答える