CODEWITHSUNDEEP
javascriptjqueryfancybox
Alon
Alon

Reputation: 3906

jquery fancybox2 - loading a div using fancybox

I have a form as the following :

<div id='popUpForm' style="display:none;z-index: 999999;">
some content
</div>

and a <div id='overlayFormWrapper'></div>

I would like to trigger that popUpForm to popup as a fancybox. How do I achieve it ? I need the content of that div to load inside the fancybox2. Thanks

Upvotes: 0

Views: 3353

Answers (1)

JFK
JFK

Reputation: 41143

You need an anchor pointing to that form with a specific class or ID like

<a class="fancybox" href="#popUpForm">open form in fancybox</a>

Then you need to bind that selector (class="fancybox") to fancybox ... with this custom script

<script type="text/javascript">
$(document).ready(function() {
 $(".fancybox").fancybox({
   width: 480, // or whatever
   height: 320,
   autoSize : false
 }); // fancybox
}); // ready
</script>

Optionally your form may have already some dimensions set through CSS so in that case you don't need to set width nor height within fancybox and autoSize should be set to true.

PS. I didn't understand what is the role of <div id='overlayFormWrapper'></div>

UPDATE: To launch the form (in fancybox) after an event, you could create a function :

function fancyForm(){
 $.fancybox({
   href     : "#popUpForm",
   autoSize : true,
   fitToView: false
 });
}

Then just call that function after your event. Since your form has already a size, autoSize will set the fancybox size according to those dimensions.

Upvotes: 2

Related Questions