Fancybox：追加到div，而不是正文

我想要fancybox打開一個窗口，該鏈接的父div的寬度/高度爲100％，而不是正文。任何關於如何實現這一目標的指針？Fancybox：追加到div，而不是正文

$(".fancybox").fancybox({ 
      padding: 0, 
      margin: 10, 
      maxWidth: '500px', 
      maxHeight: '250px', 
      fitToView: true, 
      width: '100%', 
      height: '100%', 
      autoSize: true, 
      closeClick: false, 
      openEffect: 'fade', 
      closeEffect: 'fade', 
      speedIn: 100, 
      speedOut: 100 
    });

HTML

<h2>Tools &amp; Resources</h2> 
<h3>Valuable industry insights from us to you — for free.</h3> 


<div class="article nthChild-1 firstChild"> 
    <div class="preview"> 
    <div class="title">Rates are changing. What’s your game plan? <span class="cta"><a href="/home/tools/rates-changing" class="fancybox fancybox.iframe" target="_top">Read&nbsp;more</a></span></div> 
    </div> 
</div> 
<div class="article nthChild-2"> 
    <div class="preview"> 
    <div class="title">Stay up to date on industry insights.<br> <span class="cta"><a href="/home/tools/industry-insights" class="fancybox fancybox.iframe" target="_top">Read&nbsp;more</a></span></div> 
    </div> 
</div> 
<div class="article nthChild-3"> 
    <div class="preview"> 
    <div class="title">How to identify a Millennial.<br> <span class="cta"><a href="/home/tools/identify-millenial" class="fancybox fancybox.iframe" target="_top">Read&nbsp;more</a></span></div> 
    </div> 
</div> 
<div class="article nthChild-4"> 
    <div class="preview"> 
    <div class="title">Retail success at the counter, the window, and the screen. <span class="cta"><a href="/home/tools/retail-success" class="fancybox fancybox.iframe" target="_top">Read&nbsp;more</a></span></div> 
    </div> 
</div> 
<div class="article nthChild-5"> 
    <div class="preview"> 
    <div class="title">Consumers are talking about...<br> <span class="cta"><a href="/home/tools/consumers-are-talking" class="fancybox fancybox.iframe" target="_top">Read&nbsp;more</a></span></div> 
    </div> 
</div> 
<div class="article nthChild-6 lastChild"> 
    <div class="preview"> 
    <div class="title">Build a winning culture that works.<br> <span class="cta"><a href="/home/tools/build-winning-culture" class="fancybox fancybox.iframe" target="_top">Read&nbsp;more</a></span></div> 
    </div> 
</div>

來源

2016-07-24 Fred Sodergren

這裏有一個筆的容器（<div>）[鏈接]（http://codepen.io/fsodergren/pen/akKoBY）。我希望它保持在.container的範圍內，而不是窗口。有任何想法嗎？ –

恐怕你需要粘貼在你的文章中的代碼（鏈接可能會過時，你的問題/答案毫無意義） – JFK

使用指向你想要添加的fancybox喜歡容器的選擇的API選項parent：

jQuery(document).ready(function ($) { 
    $(".fancybox").fancybox({ 
     // API options 
     parent: "#wrap" 
    }); // fancybox 
}); // ready

假設你有id="wrap"

<div id="wrap"></div>

看到JSFIDDLE

來源

2016-08-06 22:25:35 JFK

這就是我應該儘管它應該工作，但沒有得到它的工作。 http://jsfiddle.net/2jru2ybs/ –

@FredSodergren：包裝需要一個相對位置http://jsfiddle.net/2jru2ybs/1/你可能需要更多的CSS工作，使它按照你想要的方式工作，但是'parent'選項是正確的答案;） – JFK

Fancybox：追加到div，而不是正文

回答

相關問題