CODEWITHSUNDEEP
javascriptjquery
Ben
Ben

Reputation: 2564

return a href false back to true

$(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?

Upvotes: 0

Views: 480

Answers (1)

AfromanJ
AfromanJ

Reputation: 3932

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

Upvotes: 1

Related Questions