如何以内联div以编程方式触发fancybox? [英] How to programmatically trigger fancybox with an inline div?

问题描述

当某人尝试提交表单时，我想显示一个花哨框.所以我有这个:

I want to make a fancybox appear when someone tries to submit a form. So I've got this:

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

效果很好，但是我宁愿使用div而不是尝试在内容字符串中指定所有HTML.我可以用它弹出

Works good, but I'd rather use my div than trying to specify all the HTML in the content string. Can I make it popup with this

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

相反?

推荐答案

对于FancyBox v3或更高版本，请参见此答案

For FancyBox v3 or later see this answer

对于旧版本:

您需要在href属性中设置div ID.如果您第二次打开content属性中的$('#access-policy').show()，则此花哨框将不显示任何内容.

You need to set in href property the div ID. If you use $('#access-policy').show() in content property the second time you open this fancybox will show nothing.

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

在HTML中也必须是:

Also in the HTML has to be:

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

:)

这篇关于如何以内联div以编程方式触发fancybox?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！