如何让FancyBox不隐藏原来的内联块

Question

如何让FancyBox不隐藏原来的内联块

Ron*_*vis 2 javascript jquery fancybox fancybox-2

我正在尝试使用 Fancybox 来“扩展”页面上的内联元素，以使其更易于阅读。在其原始位置，该元素是可见的，但样式设置为显示在一个小滚动框中。下面是一个展开链接。单击该链接会调用 Fancybox 将元素放入 Fancybox 中。

一切都很好。

但是，当您单击“关闭”时，它会将原始元素放回到原来的位置，但它会将 style="display:none" 作为属性添加到元素中，从而导致文本消失。

这是一个最小的案例示例，显示了会发生什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Fancy Box data test</title>
    <meta name="generator" content="BBEdit 10.5" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.js"></script>
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
    <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
    <script type="text/javascript" >
        jQuery.noConflict();
        jQuery(document).ready( function() {
            jQuery("a#inline").fancybox(
                {
                'hideOnContentClick': true
                })
            }
        );
    </script>
    <style type="text/css">
        .agreement-content { 
            overflow:auto; 
            height:12em; 
            padding:10px; 
            background-color:#fbfaf6; 
            border:1px solid #bbb6a5; 
            width: 300px;
            margin: 30px;
            }
    </style>
</head>
<body>
<p>
This is testing having FancyBox "expand" a custom field.
<p>

<div class="agreement-content">
    <div id="lightCoH">
<p>
    Supported neglected met she therefore unwilling discovery remainder. Way sentiments two indulgence uncommonly own. Diminution to frequently sentiments he connection continuing indulgence. An my exquisite conveying up defective. Shameless see the tolerably how continued. She enable men twenty elinor points appear. Whose merry ten yet was men seven ought balls. 
</p>

<p>
Blind would equal while oh mr do style. Lain led and fact none. One preferred sportsmen resolving the happiness continued. High at of in loud rich true. Oh conveying do immediate acuteness in he. Equally welcome her set nothing has gravity whether parties. Fertile suppose shyness mr up pointed in staying on respect. 
</p>

    </div>
</div>
<a id="inline" href="#lightCoH">Expand</a>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

查看 Chrome 开发者工具元素视图中的源代码，您可以看到它更改了<div id="lightCoH">.

当页面加载时，就像上面的源代码一样。

当你点击展开链接时，它就变成了<div class="fancybox-placeholder" style="display: none;"></div>

当你关闭这个精美的盒子时，它就变成了<div id="lightCoH" style="display: none;">

我尝试过放入一个空的样式属性，认为它会选择它并将其重置为原始设置，但没有运气。

也许这就是 Fancybox 的工作原理——仅适用于不可见的内联元素。如果是这样，是否有解决方法，也许使用 afterClose 回调？

Answer 1

JFK*_*JFK 5

只需添加一个回调来恢复内联内容，例如：

afterClose: function() {
    $("#lightCoH").show();
}

Run Code Online (Sandbox Code Playgroud)

参见JSFIDDLE

BTW是hideOnContentClickFancybox v1.3.x 的一个选项......你必须使用closeClick它。检查/sf/answers/588321121/了解更多

归档时间：	12 年，10 月前
查看次数：	9261 次
最近记录：	12 年，10 月前