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を参照してください

ところで、hideOnContentClickFancyboxv1.3.xのオプションです...closeClick代わりに使用する必要があります。詳細については、 https：//stackoverflow.com/a/8404587/1055987を確認してください

于 2013-01-04T22:37:10.847 に答える