Я пытаюсь использовать 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?
