我正在尝试使用 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 开发者工具元素 View 中的源代码，您可以看到它更改了 <div id="lightCoH"> .
当页面加载时，就像上面的源代码一样。
当您点击展开链接时，它会变成 <div class="fancybox-placeholder" style="display: none;"></div>
当你关闭这个精美的盒子时，它会变成 <div id="lightCoH" style="display: none;">
我尝试放入一个空的样式属性，认为它会选择它并将其重置为原始设置，但没有运气。
也许这就是 Fancybox 的工作原理——仅适用于不可见的内联元素。如果是这样，是否有解决方法，也许使用 afterClose 回调？
最佳答案
只需添加一个回调即可恢复内联内容，例如:
afterClose: function() {
$("#lightCoH").show();
}
参见JSFIDDLE
顺便说一句，hideOnContentClick 是 Fancybox v1.3.x 的一个选项...您必须使用 closeClick 代替。检查https://stackoverflow.com/a/8404587/1055987了解更多
关于javascript - 如何让FancyBox不隐藏原来的内联 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14163967/