Question

我正在尝试使用Fancybox“扩展”页面上的内联元素，以便于阅读。在它的原始位置，元素是可见的，但风格显示在一个小的滚动框中。在那下面是一个Expand链接。单击该链接会调用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回调？

Answer 1

只需添加回调即可恢复内联内容，例如：

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

参见 JSFIDDLE

BTW ，hideOnContentClick是Fancybox v1.3.x的一个选项...您必须使用closeClick。检查https://stackoverflow.com/a/8404587/1055987了解更多

如何使FancyBox不隐藏原始内联块

1 个答案: