0

I have a Fancybox plugin installed and I have a JS part

<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>

And in HTML I have

<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>

The problem is that when I load a page popup is working but it's so choppy :/ Fade-out when I close a popup is smooth but fade-in so bad :/ Why is that?

4

1 に答える 1

0

Fancybox は現在、自動的に起動する方法を直接サポートしていません。私が作業することができた回避策は、非表示のアンカー タグを作成し、onclick イベントをトリガーすることです。jquery および fancybox js ファイルがインクルードされた後に、onclick イベントをトリガーする呼び出しがインクルードされていることを確認してください。私が使用したコードは次のとおりです。

このサンプル スクリプトは html に直接埋め込まれていますが、js ファイルに含めることもできます。

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

ソース:ページの読み込み時に jQuery Fancybox を起動する方法は? .

これを試してみると、ファンシーボックスがよりスムーズになります

于 2012-06-21T11:38:51.557 に答える