如何使用qTip插件自动显示5秒延迟的模态?

时间:2014-04-27 09:26:47

标签: javascript jquery qtip

如何在5秒后自动弹出以下模态弹出窗口?我对jQuery或Javascript不太熟悉。我知道它可能与window.onload有关,但不太确定如何实现它。感谢。

 <script>

    $(document).ready(function() {

        $('.tip').qtip({
        content: {
            text: $('#register'),
        },
        position: {
            my: 'center',
            at: 'center',
            target: $(document.body)
        },
        style: {
            classes: 'qtip-tipsy'
        },
        show: {
            modal: {
                on: true,
                blur: true, // Enables ability to exit when clicking on gray background
                escape: true // Enables exit by escape key
            },
            when: {

            }
        }
    })

    });

</script>

</head>
<body>

<div id="register">

    test

</div>

<button class="tip">Register</button>

1 个答案:

答案 0 :(得分:0)

使用setTimeout()功能:

$(document).ready(function() {

       setTimeout(showPopup,5000); // call showPopup after 5 seconds

    });


function showPopup()
{

 $('.tip').qtip({
        content: {
            text: $('#register'),
        },
        position: {
            my: 'center',
            at: 'center',
            target: $(document.body)
        },
        style: {
            classes: 'qtip-tipsy'
        },
        show: {
            modal: {
                on: true,
                blur: true, // Enables ability to exit when clicking on gray background
                escape: true // Enables exit by escape key
            },
            when: {

            }
        }
    })

}