使用Fancybox将div显示为弹出窗口

Question

I need to show a div with application form as a pop-up using fancybox. Is it possible to .fancybox() anything but image because all the tutorials i came across on the internet use .

Thanks in advance!

I have the following code:

<input type="button" value="Preview" id="btnPreview" />

testen text!

 <script type="text/javascript"> $(document).ready(function () { $('#divDetails').hide(); $('#divPreview').hide(); $('.image').click(function () { var imgPath = $(this).attr('src'); var imgName = imgPath.substring(0, imgPath.length - 4); var imgAlt = $(this).attr('alt'); $('#mainDiv').hide(); $('#divDetails').show('slow'); $('#detailedImage').attr('src', imgName + '-large.jpg').attr('alt', imgAlt); }); $('#btnPreview').click(function () { $('#divDetails').show(); $("#divPreview").fancybox(); }); }) </script> 

The rest of the code is not relevant. when I click the btnPreview button I want the div with ID divPreview to pop-up and I call $("#divPreview").fancybox();

I include these scripts

 <link href="../css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="../fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script> <script src="../fancybox/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script> <script src="../fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script> 

What am I doing wrong?

Thank you!!

Answer 1

Give some more information please... What context? What is your html?

Possible mistakes:

1) jQuery is not loaded before you run this snippet (include it as first) 2) One or both id's are not found. 3) fancybox is not included before you run this snippet.

Answer 2

I personally use prettyPhoto, its very simlar to fancy box, however Ive found it to be more compatible with older browsers.

have a look

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

I belive the page you are looking for, for loading custom content is here

http://www.no-margin-for-errors.com/blog/2010/09/28/tutorial-opening-custom-content-in-prettyphoto/

In that example they use a google maps :)

Hope this helps you out.