divboxを直接表示するためのfancyboxダイアログプラグインの使い方

Question

JQuery UIライブラリを使用してダイアログを開くconfirm（）というjavascript関数があります。例えば

：

jQuery('#confirm-popup').dialog('open'); 

これが開き、ID confirm-popupとのdivをレンダリングします。私はそれが私が必要とする弾力的な効果があるので、fancyboxに切り替えるしたいと思います。だから、私はfancyboxをインストールした後、次のことがうまくいくことを期待していた。

jQuery('confirm-popup').fancybox(); 

これは動作していません。私が見る限り、アンカータグのfancybox()関数を呼び出すことしかできません。アンカータグを使用したくないのです。これは、既に私の確認関数をこれらのタグにマップしているので、多くのコード変更が必要になるためです。

理想的には、div要素をつかんでjQuery UIダイアログメソッドと同様の方法で表示したいのですが？ Fancyboxでこれを行う方法はありますか？

Answer 1

divにfancyboxを使用することができますが、私の最初の質問はあなたがIDの＃を忘れたかどうかです。 HTMLを投稿し、fancybox（）が呼び出された場所がdocument.readyにある必要があるので、これは便利です。また、ダイアログボックスを直接開くのではなく、ダイアログを開くときに.fancybox（）を呼び出すこともできます。あなたはそれを逃した場合

、これはfancyboxサイトからの例です：

<script> 
    $(document).ready(function() { 
     $("#inline").fancybox(); 
    }); 
</script> 
<a id="inline" href="#data">This shows content of element who has id="data"</a> 
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div> 

Answer 2

ダイアログとしてFancyBoxを使用したい場合は、あなたのようなそれを直接呼び出すことができます。

$.fancybox({ 
    'width'    : '60%', 
    'height'    : '65%', 
    'autoScale'   : true, 
    'hideOnContentClick' : false, 
    'href'    : someUrl, 
    'callbackOnShow'  : function(){ ... }, 
    'onClosed'   : function(){...},      
    'type'    : 'iframe' 
}); 

Answer 3

を

これは、fancyboxを直接呼び出して<a href>リンク要素を必要とせずにfancybox（1.3.4）を使用する方法を示しています。

インライン：

<div style="display:none;"> 
    <div id="confirm-popup"> 
     dialog content 
    </div> 
</div> 

$('#myform').submit(function() { 
    $.fancybox({ 
     type: 'inline', 
     content: '#confirm-popup' 
    }); 
}); 

インラインフレーム：

$('#myform').submit(function() { 
    $.fancybox({ 
     type: 'iframe', 
     href: 'http://www.abc123.com' 
    }); 
});