return a href false back to true

Question

$(document).on('click', '.popBox', function(){
    //get a href url and load content into popBox

    $('.close').click(function(){
        //close popBox
    });

    return false;//disable href go next page
});

I have <a> , when user click, popBox will open and load content from href's url.

I put return false to disable href go next page.

my problem is when i close the popBox and try to click the <a> again, it stay false and the popBox wont open again, is any way to turn it back?

Answer 1

You should use e.preventDefault(); to stop the link going to a page.

I believe you also want to add some sort of toggle to open and close the popup within the same function. Instead of having another click function within to close.

You could do this with an active class. An example is below:

JQuery

$(document).on('click', '.popBox', function(e){
    //prevent default behavior
    e.preventDefault();
    $('.your-pop-box').toggleClass('active');
});

HTML

<a href="http://www.google.co.uk" class="popBox">Fire The Pop up</a>
<div class="your-pop-box">
    <p>Pop up content.</p>
    <p>Pop up content.</p>
    <p>Pop up content.</p>
</div>

CSS

.your-pop-box {
    display: none;
}
.your-pop-box.active {
    display: block;
}

Here is a Demo