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）它显示了fancybox，但是当我单击叠加时，它会关闭。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 回答