花式框未正确显示，并通过叠加单击关闭

我在应用程序中使用了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）它显示了花哨的框，但是当我单击叠加层时，它会关闭。如果我使用以下代码，它不起作用：

 $("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>

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

您需要

添加<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 - 这是弹出窗口div 的链接

相关内容

最新更新

热门标签：