javascript - jquery fancybox2 - fancybox を使用して div をロードする

Question

私は次のようなフォームを持っています:

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

そして<div id='overlayFormWrapper'></div>

その popUpForm を派手なボックスとしてポップアップするようにトリガーしたいと思います。どうすれば達成できますか？fancybox2 内にロードするには、その div のコンテンツが必要です。ありがとう

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>

width必要に応じて、フォームにCSSheightを介して既にいくつかの寸法がautoSize 設定されている場合がありますtrue。

PS。役割が分からなかった<div id='overlayFormWrapper'></div>

更新: イベントの後に (fancybox で) フォームを起動するには、関数を作成できます。

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

次に、イベントの後にその関数を呼び出します。form既にサイズが設定されているため、それらの寸法に応じて fancybox のサイズautoSizeが設定されます。