弹出窗口关闭时如何不刷新页面?

时间:2014-09-25 22:31:15

标签: javascript popup page-refresh

所以当点击一个链接时,我在页面上有一个非常简单的弹出窗口,但是当我点击关闭按钮时它会刷新页面。这是不好的,因为我在一组Ajax选项卡中有它,所以在刷新时它会返回到tab1而不是停留在tab3上。有任何想法的功能,我知道有一个让父页面刷新,所以必须有一个没有刷新?谢谢!

这是我的JS

$(document).ready(function(){
    // show popup when you click on the link
    $('.show-popup').click(function(event){
        event.preventDefault(); // disable normal link function so that it doesn't refresh the page
        var docHeight = $(document).height();
        var docWidth = $(document).width(); //grab the height of the page
        $('.overlay-bg').show().css(); //display your popup and set height to the page height
        $('.overlay-content').css({'top': scrollTop+20+'px'}); //set the content 20px from the window top
    });

    // hide popup when user clicks on close button
    $('.close-btn').click(function(){
        $('.overlay-bg').hide(); // hide the overlay
    });

    // hides the popup if user clicks anywhere outside the container
    $('.overlay-bg').click(function(){
        $('.overlay-bg').hide();
    })
    // prevents the overlay from closing if user clicks inside the popup overlay
    $('.overlay-content').click(function(){
        return false;
    });

});

1 个答案:

答案 0 :(得分:1)

我猜你的近距离dom包含一个链接。在您的关闭处理程序中,只需添加事件参数并像其他点击一样防止默认。

请参阅下面的更新关闭功能

$('.close-btn').click(function(evt) {
    evt.preventDefault();
    $('.overlay-bg').hide(); 
 });