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>

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

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

当您单击展开链接时,它变为<div class="fancybox-placeholder" style="display: none;"></div>

当你关闭花哨的盒子时,它会变成<div id="lightCoH" style="display: none;">

我尝试在其中放置一个空的样式属性,以为它会拾取它并将其重置为其原始设置,但没有运气。

也许这就是 Fancybox 无法正常工作的方式——仅适用于不可见的内联元素。如果是这样,是否有解决方法,也许使用 afterClose 回调?

4

1 回答 1

4

只需添加一个回调即可恢复内联内容,例如:

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

JSFIDDLE

顺便说一句hideOnContentClick是 Fancybox v1.3.x 的一个选项……你必须closeClick改用。检查https://stackoverflow.com/a/8404587/1055987了解更多信息

于 2013-01-04T22:37:10.847 回答