Question

我想让fancybox打开一个窗口，该窗口的宽度/高度为链接父节点的100％，而不是正文。有关如何实现这一点的任何指示？

    $(".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>

`

Answer 1

使用API选项parent指向要添加fancybox的容器的选择器：

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

假设您有一个带有<div>

的容器（id="wrap"）

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

参见 JSFIDDLE

Fancybox：附加到div，而不是body

1 个答案: