Set Opacity With Js Or Close Modal Window

I would like to 'close' a modal window. It's a wordpress template and it's ugly... I have a div :

Solution 1:

jQuery

$('img[alt*=Close]').click(function() {
    $('.modal').hide();
});

JS

var img = document.querySelector('img[alt*=Close]'),
       modal = document.querySelector('.modal');
img.addEventListener('click', function() {
    modal.style.display = 'none';
});

Solution 2:

when the img with alt="Close" is clicked, I would like to close or set the opacity of all the div.modal at 0.

Absolutely!

First i want to mention that there is some attribute selectors which are now officially available in css3, so that can be used as a jQuery selector like:

$('body').on('click', 'img[alt="Close"]', function(e){
    $(this).closest('.modal').fadeOut(); // to fade out the entire div.// $(this).closest('.modal').hide(); // hide will hide the modal
});

If your modal is dynamically created then you have to follow the technique of event delegation, which has the syntax like:

$(staticParent).on(event, selector, callback);

Solution 3:

Yep! Just set thee css property opacity

$(".modal").css({ opacity: 0.5 });

Solution 4:

You can listen for click events on the img div with:

document.querySelector("img[alt=Close]").addEventListener("click", yourHandler);

However, accessing an image using its alt attributes looks like a terrible idea. alt is to display infotip and accessibility message for the user, not to identify a DOM element. It would much better if you can give this image an id or a class:

document.getElementById("yourImgId").addEventListener("click", yourHandler);

Then:

var modal = document.querySelector(".modal");

functionyourHandler(){
   modal.style.opacity = 0;
}

or

function yourHandler(){
   modal.style.display = "none";
}

A last solution can be to define the style properties in a stylesheet like:

.modal.disabled {
    display: none;
}

And then add the class to modal to disable it.

function yourHandler(){
    modal.classList.add("disabled");
}

This last solution is more flexible and easier to maintain as it separates the logic to the style.

Share