web-dev-qa-db-ja.com

インラインdivを使用してプログラムでfancyboxをトリガーする方法

誰かがフォームを送信しようとしたときに、ファンシーボックスを表示したいのですが。だから私はこれを持っています：

$('#login-form').submit(function(e) {
    $.fancybox({
        content: '<h2>Hello Fancybox</h2>',
        modal: true
    });
    return false;
});

うまく動作しますが、コンテンツ文字列ですべてのHTMLを指定しようとするよりも、divを使用したいです。これでポップアップしてもいいですか

<div style="display:none" id="access-policy">
blah blah blah
</div>

代わりに？

jqueryfancybox
18
mpen

FancyBox v3以降の場合 この回答を参照してください

古いバージョンの場合：

hrefプロパティにdiv IDを設定する必要があります。 contentプロパティで$('#access-policy').show()を使用すると、このファンシーボックスを2回目に開いたときに何も表示されません。

$('#login-form').submit(function(e) {
    $.fancybox({
        href: '#access-policy', 
        modal: true
    });
    return false;
});

また、HTMLは次のようにする必要があります。

<div style="display:none">
    <div id="access-policy">
        blah blah blah
    </div>
</div>

:)

31
Marçal Juan

他の回答は更新する必要があります

受け入れられた回答のコードを使用していて、30分頭を悩ませていたからです。

最新のFancyBox 3では、いくつかのオプション名といくつかのメソッドの使用方法が変更されました。

インライン要素を開く方法に関する古いバージョン：

$.fancybox({ // OUTDATED
    href: '#element-id', 
    modal: true
});

に変更する必要があります

$.fancybox.open({ // FancyBox 3
    src: '#element-id', 
    modal: true
});

openメソッドとhref-> srcの変更に注意してください。

開いていない場合、fancyboxは関数エラーではありません。 「src」がないと、要求されたコンテンツをロードできないポップアップが表示されます。

これが誰かが私の同じ間違いを避けるのを助けてくれることを願っています、そして私たちはこれについてのドキュメントに従う必要があります。それは時代遅れになるのがはるかに難しいです。

8
Michael Shang

できるよ：

$('#login-form').submit(function(e) {
    $.fancybox({
        content: $('#access-policy').show(), 
        modal: true
    });
    return false;
});
6
Neal

気にしないで。 contentはjqueryオブジェクトにすることができます：

$('#login-form').submit(function(e) {
    $.fancybox({
        content: $('#access-policy'),
        modal: true
    });
    return false;
});

ただし、divは非表示のdivでラップする必要があります。

<div style="display:none"><div id="access-policy">
blah blah blah
</div></div>

そうでなければ何も表示されません。表示プロパティは変更されません。

4
mpen

コンテンツは「任意のHTML」なので、DivからHTMLを取得してコンテンツに渡します

content: $('#access-policy').html(),
3
amit_g

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

インライン（1.3.4）：

<div id="menuitem" class="menuitem"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'content': '#dialogContent'
    });
});

インライン（2.1.5）：

<div id="menuitem" class="menuitem"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'href': '#dialogContent'
    });
});

Iframe：

<div id="menuitem" class="menuitem"></div>

$('#menuitem').click(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});
2
Ronald