Question

我安装了Fancybox插件，我有一个JS部分

<script type="text/javascript">
    function openFancybox(name) {
      $.fancybox({
        'autoScale': true,
        'transitionIn': 'fade',
        'transitionOut': 'fade',
        'type': 'inline',
        'href': name,
        'scrolling'   : 'no',
        afterClose: function(){
            $('div.qtip:visible').qtip('hide');
      }
     });
    }

    function showDialog(dialogId, title, message) {
       $(dialogId + ' p').html(message);
       $(dialogId + ' h3').html(title);
       openFancybox(dialogId);
    }

    $(document).ready(function() {
        showDialog('#info-dialog', 'Logout.', 'You are now logged out.');
    });
</script>

在HTML中我有

<div id="info-dialog" class="dialog-holder">
    <div class="dialog">
        <div class="dialog-content">
            <a href="#" class="close-button close">Close</a>
            <h3>Header.</h3>
            <p>Paragraph.</p>
            <a href="#" class="button large blue close">Close</a>
        </div>
    </div>
</div>

问题在于，当我加载页面时弹出窗口正在工作但是它如此不稳定：/当我关闭弹出窗口时淡出但是淡入淡出非常糟糕：/为什么会这样？

Answer 1

Fancybox目前不直接支持自动启动的方式。我能够开始工作的工作是创建一个隐藏的锚标签并触发它的onclick事件。在包含jquery和fancybox js文件之后，确保包含触发onclick事件的调用。我使用的代码如下：

此示例脚本直接嵌入到html中，但它也可以包含在js文件中。

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>

来源：How to launch jQuery Fancybox on page load?。

试试这个，fancybox会更顺畅

Choppy fancybox淡入内联内容

1 个答案: