6

私と同じ問題を経験した人を助けるために、ここに問題と解決策を投稿しています。

ユーザーがアイコンをクリックして「ズーム」できるように<div>したいページがあります。は<div>隠されていません。

fancyBox ( fancyBox ホームページ) を使用し<div>て、一種のモーダル ウィンドウとして表示しました。他のライトボックス タイプのプラグインよりも fancyBox を使用した理由は、 のコンテンツを複製せずに<div>移動するため、すべてのフォーム要素などが引き続き機能するためです。問題は、fancyBox ウィンドウを閉じた後<div>、メイン ページで非表示になることです。

ソリューション：

私は fancyBox 2.1.2 を使用しました。

JFKDIAZ が github ( https://github.com/fancyapps/fancyBox/issues/103 ) に投稿したソリューションを使用して、fancyBox ウィンドウを閉じた後に div が親に返されるようにしました。

次に、jquery の表示機能を使用して、div をインラインで再度表示しました。

ファンシーボックスを初期化するための私のコードは以下のとおりです。親を識別し、親に戻る関数に注意してくださいbeforeLoad(これについては JFKDIAZ に感謝します)。が消えないように再度表示するの追加に注意してください。残りは、fancyBox の標準的な初期化です。afterClose<div><div>$(inlineTarget).show();<div>

        $(document).ready(function() {
        $(".various").fancybox({
            beforeLoad: function() {
                inlineTarget = this.href;
                parentNodename = $(inlineTarget).parent().get(0).tagName.toLowerCase();
                $(inlineTarget).parent(parentNodename).addClass("returnTo");
            },
            afterClose: function() {
                $(inlineTarget).appendTo(".returnTo");
                $(".returnTo").removeClass("returnTo");
                $(inlineTarget).show();
            },
            maxWidth: 880,
            maxHeight: 600,
            fitToView: false,
            width: '70%',
            height: '70%',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none'
        });
    });

のコードと、fancyBox<div>に表示するためのリンクを以下に示します。コードが認識できるように<div>、親に<div>は が必要であることに注意してください。idclassは、fancyBox を適用する必要がvariousある要素を識別するために使用するタグです。<a>

    <a href="#application_form" class="various">Zoom</a>
    <div id="application_parent">
        <div id="application_form">
            Contents to display in fancyBox and return back here when complete.
        </div>
    </div>

これは私にとって非常にうまくいきました。すべてのフォーム要素が fancyBox に移動され、ページ上の元の位置に戻りました。

更新(コメントからフィドルへのリンクを移動) - デモについては、http: //jsfiddle.net/z8e9q/3/を参照してください。

これが同じ問題を抱えている人に役立つことを願っています。

4

3 に答える 3

4

私は fancybox v2.0.6 以下のソリューションを書きました (私も JF​​KDIAZ です ;)。その問題は、新しいリリース v2.1.x + (コンテンツを元の場所に戻すために一時的なプレースホルダーが設定されています) で修正されていますが、v2.1.x + (v2.1.2 から現在まで) での新しい問題コンテンツは実際に適切に返されますが、非表示になっています。

新しい回避策 (バージョン 2.1.x + の場合) は、次のように表示するだけafterCloseです。

var tarGet; // initialize var at top of script

コールバック

beforeShow: function(){
 tarGet= this.href;
},
afterClose: function(){
 $(tarGet).show();
}

分岐したフィドルを参照してください

編集(2014 年 3 月 27 日): @Henrik-Erlandssonの回答で指摘されているように、グローバル変数を回避するには、次のようにします。

afterClose: function(){
  $(this.href).show();
}

フォークされた JSFIDDLEを参照してください

于 2012-10-21T22:56:04.093 に答える