CODEWITHSUNDEEP
javascriptjqueryhtmlcssmodal-dialog
Victor Vaughn
Victor Vaughn

Reputation: 21

Add blur class when modal is shown, remove when modal is hidden

I'm using Kyle Fox's jquery modal plugin, and I am trying to add a 'blur' class to the body. I am using the following jquery code, but it doesnt seem to work. I placed it right before body closes, but it's not doing anything when I hit the link with the 'toggle' class. If I only use the 'addclass' bit, it does work, but then of course I have no way to remove the 'blur' class.

    $(function() {

 $(".toggle").click(function () {
     $('body').addClass("blur");

});

$('body').click(function () {
    $('body').removeClass('blur');
});

});

To trigger the event, Click on the 'meer info' link when you hover on the first round picture above 'kraantje pappie'.

Thanks in advance!

Upvotes: 1

Views: 1008

Answers (1)

lesssugar
lesssugar

Reputation: 16181

Here's what's happening in your code:

  1. When .toggle element is clicked, the blur class is actually added to body element

  2. Instantly after the class is added, it's removed by the second part of the script, as you use removeClass when clicking on body. When you click on .toggle you also click on body as a parent element ;)

So, this is done wrong:

$('body').click(function () {
    $('body').removeClass('blur');
});

Use other selector to change body class when the modal is open, e.g. add a close button and attach click event to it.

To see if I'm correct, just remove the code above from your page, then try clicking on the first modal-element ("KRAANTJE PAPPIE").

Cheers.

Upvotes: 1

Related Questions