Jquery弹出窗口会自动弹出

时间:2014-07-20 18:43:47

标签: javascript jquery popup

我已经获得了一段Jquery代码,该代码允许用户单击一个链接,该链接将打开包含信息的弹出窗口。但我不知道如何修改它,以便在用户加载页面时自动打开弹出窗口。

Jquery的:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
jQuery(document).ready(function ($) {

    $('[data-popup-target]').click(function () {
        $('html').addClass('overlay');
        var activePopup = $(this).attr('data-popup-target');
        $(activePopup).addClass('visible');

    });

    $(document).keyup(function (e) {
        if (e.keyCode == 27 && $('html').hasClass('overlay')) {
            clearPopup();
        }
    });

    $('.popup-exit').click(function () {
        clearPopup();

    });

    $('.popup-overlay').click(function () {
        clearPopup();
    });

    function clearPopup() {
        $('.popup.visible').addClass('transitioning').removeClass('visible');
        $('html').removeClass('overlay');

        setTimeout(function () {
            $('.popup').removeClass('transitioning');
        }, 200);
    }

});
});//]]>  

</script>

链接以激活代码:

    <a href="#example-popup" data-popup-target="#example-popup">Link</a>

弹出窗口的内容:

<div id="example-popup" class="popup">
    <div class="popup-body">    <span class="popup-exit"></span>

        <div class="popup-content">
                <h2 class="popup-title">Terms and Conditions</h2>
                <p>
                <h5><font color="grey">Please take time to read the following...</font></h5>


        </div>
    </div>
</div>
<div class="popup-overlay"></div>

我尝试过将其修改为mysql,但它没有成功。因为我不是Jquery的专家。 我知道这是一个很大的问题,但代码就在这里。而且我知道一些极客很容易找到我需要的东西:)

如此快速。而不是让用户单击链接打开弹出窗口。我想让弹出窗口自动打开

1 个答案:

答案 0 :(得分:1)

在注册点击处理程序后触发对所需元素的单击时,相当简单。

/* your original code stays mostly the same except for chaining methods after it*/
$('[data-popup-target]').click(function () {
    $('html').addClass('overlay');
    var activePopup = $(this).attr('data-popup-target');
    $(activePopup).addClass('visible');
 /* now click the first one */
}).first().click();

ID必须在页面中是唯一的,因此如果它们与显示的相同,您应该更改弹出链接和弹出容器中的重复项