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

时间:2011-09-26 13:52:00

标签: jquery asp.net html fancybox

我需要使用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>

我做错了什么?

谢谢!

2 个答案:

答案 0 :(得分:0)

请提供更多信息......具体情况如何?你的HTML是什么?

可能出现的错误:

1)在运行此代码段之前未加载jQuery(首先包含它) 2)找不到一个或两个id。 3)在运行此代码段之前,不包括fancybox。

答案 1 :(得分:0)

我个人使用的是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/

在该示例中,他们使用谷歌地图:)

希望这可以帮助你。