Question

我有一个名为confirm（）的javascript函数，它使用JQuery UI库打开对话框。

例如：

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

这会打开并呈现ID为confirm-popup的div。我想切换到fancybox，因为它具有我需要的弹性效果。所以我希望在安装fancybox之后，以下内容会起作用。

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

这似乎不起作用。据我所知，你只能在锚标签上调用fancybox()函数。我不想使用锚标记，因为这会对我进行大量的代码更改，因为我已经将确认函数映射到这些标记。

理想情况下，我想抓住div元素并以与jQuery UI对话框方法类似的方式显示它？有没有办法用Fancybox做到这一点？

Answer 1

如果要将FancyBox用作对话框，可以直接调用它：

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

Answer 2

你可以使用fancybox作为div，但我的第一个问题是你是否遗漏了你的＃作为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 3

这演示了如何通过直接调用fancybox来使用fancybox（1.3.4）而不需要<a href> link元素。

<强>内联

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

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

<强> I帧：

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

如何使用fancybox对话框插件直接显示div

3 个答案: