0

私は2つの空<div>のようなものを持っています:

<div id="fancyboxdiv" style="display: none;"></div>
<div id="linkdiv"></div>

ファンシーボックスがこのスクリプトで開いたとき#linkdivに、jQueryでそれらの1つ（）へのリンクを挿入し、コンテンツを他の（）に挿入すると：#fancyboxdiv

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            //loading the opening link to a div with jquery
            $('#linkdiv').html('<a id="fbLink" href="#fancyboxdiv" title="fbox">see fancybox</a>');
            //opening the fancybox
            $('#fbLink').fancybox({
                'afterLoad': function() {
                    $('#fancyboxdiv').html('<h1>Fancybox</h1>');
                },
                'afterClose': function() {
                    $('#fancyboxdiv').empty();
                }
            });
        });
    })(jQuery);
</script>

#fbLinkIE8 以前のバージョンを除くすべてのブラウザーで動的に追加されたリンク ( ) をクリックすると、fancybox が起動します。

内部のリンクを次のようにハードコードする場合<div id="linkdiv">:

<div id="linkdiv"><a id="fbLink" href="#fancyboxdiv" title="fbox">see fancybox</a></div>

次のコード行をコメントアウトします。

//$('#linkdiv').html('<a id="fbLink" href="#fancyboxdiv" title="fbox">see fancybox</a>');

ファンシーボックスは IE8 を含むすべてのブラウザーで正常に動作します。

スクリプトを IE8 以前のバージョンで動作させるにはどうすればよいですか? 後で fancybox を起動するリンクを追加する必要があります。

4

1 に答える 1

0

typeIE8以下のバージョンでは、動的に追加されたリンクからfancyboxが開くべきコンテンツを認識していないようです。なんで？私に聞かないでください、それはIEです。

回避策として、次のような(HTML5)属性を使用して、動的に追加されたリンク内typeにコンテンツ (このシナリオでは) を設定できます。inlinedata-fancybox-type

<a id="fbLink" data-fancybox-type="inline" href="#fancyboxdiv" title="fbox">see fancybox</a>

完全なスクリプトは次のようになります。

<script type="text/javascript">
(function ($) {
    $(document).ready(function () {
        //loading the opening link to a div with jquery
        // added data-fancybox-type to the link
        $('#linkdiv').html('<a id="fbLink" data-fancybox-type="inline" href="#fancyboxdiv" title="fbox">see fancybox</a>');
        //opening the fancybox
        $('#fbLink').fancybox({
            'afterLoad': function () {
                $('#fancyboxdiv').html('<h1>Fancybox</h1>');
            },
                'afterClose': function () {
                $('#fancyboxdiv').empty();
            }
        });
    });
})(jQuery);
</script>

これでうまくいくはずです（IE7でテスト済み）

于 2013-03-26T16:37:57.457 に答える