使用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/

在那個例子中，他們使用谷歌地圖:)

希望這可以幫助你。