Question

我需要使用fancybox显示带有应用程序表单的div作为弹出窗口。是否有可能.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，它非常类似于花哨的盒子，但我发现它与旧浏览器更兼容。

看看

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/

在该示例中，他们使用谷歌地图：）

希望这可以帮助你。

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

2 个答案: