Question

我在我的应用程序中使用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>

请告诉我我的代码有什么问题。

Answer 1

您需要添加<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的链接

fancybox未正确显示，并以叠加点击关闭

1 个答案: