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，而不是正文

回答

相关问题