javascript - jquery fancybox2 - 使用 fancybox 加载 div

Question

我有一个表格如下:

<div id='popUpForm' style="display:none;z-index: 999999;">
some content
</div>

和一个<div id='overlayFormWrapper'></div>

我想触发 popUpForm 作为一个 fancybox 弹出。我该如何实现它？我需要将该 div 的内容加载到 fancybox2 内。谢谢

Answer 1

您需要一个指向该表单的 anchor ，并具有特定的 class或ID喜欢

<a class="fancybox" href="#popUpForm">open form in fancybox</a>

然后您需要使用此自定义脚本将该选择器 ( class="fancybox" ) 绑定(bind)到 fancybox ...

<script type="text/javascript">
$(document).ready(function() {
 $(".fancybox").fancybox({
   width: 480, // or whatever
   height: 320,
   autoSize : false
 }); // fancybox
}); // ready
</script>

您的表单可能已经通过 CSS 设置了一些尺寸，因此在这种情况下您不需要设置 width也不height在 fancybox 和 autoSize 内应设置为true .

PS。我没明白 <div id='overlayFormWrapper'></div>的作用是什么？

更新:要在事件发生后启动表单(在 fancybox 中)，您可以创建一个函数:

function fancyForm(){
 $.fancybox({
   href     : "#popUpForm",
   autoSize : true,
   fitToView: false
 });
}

然后只需在事件结束后调用该函数即可。自从你的form已经有尺寸，autoSize将根据这些尺寸设置 fancybox 大小。