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

Question

我需要显示一个带有应用程序表单的div作为使用fancybox的弹出窗口。 是否可以.fancybox（）除了图像以外的任何内容，因为我在互联网上遇到的所有教程都使用。

提前致谢！

我有以下代码：

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

测试文本！

 <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> 

其余代码无关。 当我单击btnPreview按钮时，我要弹出ID为divPreview的div，然后调用$（“＃divPreview”）。fancybox（）;。

我包括这些脚本

 <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> 

我究竟做错了什么？

谢谢！！

Answer 1

请提供更多信息...什么情况？ 你的HTML是什么？

可能的错误：

1）在运行此代码段之前，jQuery未加载（首先包含它）2）找不到一个或两个ID。 3）在运行此片段之前，不包含fancybox。

Answer 2

我个人使用了prettyPhoto，它非常类似于花哨的盒子，但是Ive发现它与旧的浏览器更加兼容。

看一看

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

我相信您正在寻找的页面，用于加载自定义内容在这里

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

在那个例子中，他们使用谷歌地图:)

希望这可以帮助你。