1

インラインコンテンツを読み込むファンシーボックスがあります。Webサイトが読み込まれると、コンテンツがページにレンダリングされ、ドキュメントの準備ができたらファンシーボックスが表示されます。これを行うためのHTMLとJavaScriptは次のとおりです。

HTML：

<div style="display: none">
    <div id="cookieContainer">
        <div class="splash">
            <!-- Some more content here -->
            <div class="buttons">
                <a href="javascript:parent.jQuery.fancybox.open({href : '<%=UrlRewriter.GetUrlForSystemName("MyPage")%>'})" class="cookie_button settings">Instellingen</a>
                <a href="javascript:void(0);" class="cookie_button accept">Accepteren</a>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT：

$(document).ready(function(){
          $("a#myUrl").fancybox({
                'closeClick': false,
                'modal': false,
                'closeBtn': false,
                'width': '400px',
                'height': '200px',
                'autoSize': false,
                'padding': 10,
                'margin': 0
            });

          $('a#myUrl').trigger('click');
});

fancyboxには2つのハイパーリンクが含まれています。1つはjavascript（クラス「cookie_buttonaccept」のボタン）を実行し、もう1つは現在アクティブなファンシーボックス内の特定のURLにユーザーを送信する必要があります。

私はすでにFancyboxのWebサイトからさまざまなオプションを試しましたが、どれも望ましい結果をもたらしていません。例の1つ（iFrameを使用したもの）には必要な機能がありますが、これはタイプ'iFrame'のファンシーボックスから同じタイプの別のファンシーボックスに移動します。ここで私がやろうとしているのは、「inline」タイプのファンシーボックスから「iFrame」タイプのファンシーボックスに移動することです。これも可能ですか？または、これを達成する他の方法はありますか？

4

1 に答える 1

2

これはあなたがあなたのinlineコンテンツで行うことができる方法です（私がレンダリングされたhtmlを使用していることに注意してください）

<a id="myUrl" href="#cookieContainer">open fancybox</a>

<div style="display: none">
  <div id="cookieContainer">
    <div class="splash">
      <!-- Some more content here -->
      <div class="buttons"> 
        <a href="http://jsfiddle.net" id="myUrl2" class="cookie_button settings" data-fancybox-type="iframe">Instellingen</a>
        <a href="javascript:void(0);" class="cookie_button accept" onclick="jQuery.fancybox.close()">Accepteren</a>
      </div>
    </div>
  </div>
</div>

上のリンクは、fancybox（）にバインドされたセレクター#myUrlです。

さて、inlineコンテンツ内のボタンに関しては、最初のボタン（Instellingen）は新しいファンシーボックスを開くためにjavascriptを実行する必要はありません。あなたの場合、あなたはむしろそれを通常のリンクとして設定することができます：

<a href="<%=UrlRewriter.GetUrlForSystemName("MyPage")%>" id="myUrl2" class="cookie_button settings" data-fancybox-type="iframe">Instellingen</a>

そのリンクに2つの属性を追加したことに注意してください。

  • id="myUrl2"：fancyboxにバインドされる新しいセレクター
  • data-fancybox-type="iframe"：次のfancyboxはiframeとして開きます

次に、fancyboxスクリプト： 

$(document).ready(function () {
  $("#myUrl, #myUrl2").fancybox({
    closeClick: false,
    closeBtn: false,
    width: 400,
    height: 200,
    autoSize: false,
    fitToView : false,
    padding: 10,
    margin: 0
  });
  $('a#myUrl').trigger('click');
});

fancyboxをfancyboxの外側と内側の両方のセレクターにバインドしていることに注意してください。

$("#myUrl, #myUrl2")

'width': '400px'また、and 'height': '200px'by width: 400andを変更したことにも注意してheight: 200ください（整数値とブール値は引用符なしで、暗黙的に「px」になります）。

'modal': falseがデフォルト値であるため削除し、fitToView : falseを使用しているため追加しましautoSize: falseた。

オプションで、[ Accepteren ]ボタンに追加onclick="jQuery.fancybox.close()"して、クリックするとファンシーボックスが閉じられるようにしましたが、必要ない場合もあります。inline

inlineこれにより、fancyboxコンテンツからfancyboxコンテンツに移動できますiframe。

デモを見るJSFIDDLE

于 2013-01-16T19:07:59.300 に答える