Fancybox: Append to div, not body - modal-dialog

Question

I'd like to have fancybox open a window that's 100% width/height of the link's parent div, not the body. Any pointers on how to achieve this?
$(".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 & 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">Read more</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">Read more</span></div>
</div>
</div>
<div class="article nthChild-3">
<div class="preview">
<div class="title">How to identify a Millennial.<br> <span class="cta">Read more</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">Read more</span></div>
</div>
</div>
<div class="article nthChild-5">
<div class="preview">
<div class="title">Consumers are talking about...<br> <span class="cta">Read more</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">Read more</span></div>
</div>
</div>
`

Answer 1

Use the API option parent pointing to the selector of the container you want append fancybox to like:
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
// API options
parent: "#wrap"
}); // fancybox
}); // ready
assuming that you have a container (<div>) with id="wrap"
<div id="wrap"></div>
see JSFIDDLE