1

ファンシーボックススクリプトに1つの問題があります。fancybox 2.1 (最新) を使用しています。たとえば、2 つの iframe リンクを同じページで動作させたいのですが、モーダル ボックスごとに異なる設定とカスタマイズを行います。例えば

<li><a class="fancybox fancybox.iframe" href="give-me-meal.html">first</a></li>
<li><a class="fancybox fancybox.iframe" href="give-me-meal.html">second </a></li>

デフォルトのカスタマイズをオーバーライドします

<script type="text/javascript">
jQuery.extend(jQuery.fancybox.defaults, {
            href : 'iframe.html',
            type : 'iframe',
        padding : 0,
        margin  : 20,

        width     : 800,
        height    : 0,
        minWidth  : 100,
        minHeight : 400,
        maxWidth  : 9999,
        maxHeight : 9999,

        autoSize   : true,
        autoHeight : true,
        autoWidth  : false,

});
</script>

しかし、両方のポップアップは同じです。2 番目のモーダル ボックスの幅を 1000px にしたり、高さを高くしたりしたいのですが、どうすればそれを作成できますか >

ありがとう！

4

2 に答える 2

1

リンクごとに HTML5data-*属性を使用し、iframe ごとに異なるサイズを渡すことができます。たとえば、html を次のように設定します。

<li><a class="fancybox fancybox.iframe" href="give-me-meal.html" data-width="1000" data-height="600">first</a></li>
<li><a class="fancybox fancybox.iframe" href="give-me-meal.html" data-width="700" data-height="450">second </a></li>

次に、スクリプトで値を取得し、次のdata-widthようなコールバックdata-heightを使用してサイズを渡しますbeforeShow

<script type="text/javascript">
$(document).ready(function(){
 $(".fancybox").fancybox({
        padding : 0,
        margin  : 20,
        minWidth  : 100,
        minHeight : 400,
        maxWidth  : 9999,
        maxHeight : 9999,
        autoSize   : true,
        autoHeight : true,
        autoWidth  : false,
        beforeShow : function(){
          this.width = $(this.element).data("width");
          this.height= $(this.element).data("height");
        }

 }); // fancybox
}); // ready
</script>

リンクtype: "iframe"にはすでにclass fancybox.iframe

于 2012-09-26T23:17:13.047 に答える
1

ほとんどの jQuery プラグインでこれを行う通常の方法は、呼び出し時にオプションを指定し、要素に異なる ID を与えることです。

HTML:

<li><a class="fancybox fancybox.iframe" id="box1" href="give-me-meal.html">first</a></li>
<li><a class="fancybox fancybox.iframe" id="box2" href="give-me-meal.html">second </a></li>

JS:

$("#box1").fancybox();
$("#box2").fancybox({
    height: 1000
});
于 2012-09-27T02:31:26.460 に答える