javascript - jquery fancybox2 - 使用 fancybox 加载 div

Question

我有如下表格：

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

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

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

Answer 1

您需要一个指向具有特定class或ID类似内容的表单的锚点

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

然后，您需要class="fancybox"使用此自定义脚本将该选择器 ( ) 绑定到 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>

更新：要在事件后启动表单（在花式框中），您可以创建一个函数：

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

然后在您的活动之后调用该函数。由于您form已经有了尺寸，autoSize因此将根据这些尺寸设置 fancybox 尺寸。