Set opacity with js or close modal window

Question

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

<div class="modal">
    <section style="position:relative;z-index:10;">
        <div style="margin-bottom: -50px; margin-right: 50px; text-align: right;">
            <img src="./wp-content/img.png" alt="Close">
        </div>
        <p><img src="./wp-content/img2.png" alt="test"></p>
    </section>
</div>

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

deleted · Accepted Answer · 2020-05-25T20:56:04.493

3

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';
});

edited May 25 '20 at 20:56

answered Oct 07 '15 at 07:13

deleted

772
1
6
19

Thanks it's exactly what I needed, with the 'alt' selector. Thanks! – Ty Yt Oct 07 '15 at 07:16
Just to add to this, `display : none` and `visibility : hidden` are different. http://stackoverflow.com/questions/3475119/css-properties-display-vs-visibility – Manu Masson Oct 07 '15 at 07:23

score 1 · Answer 2 · answered Oct 07 '15 at 07:21

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);

A little question... When a modal window is created, the website URL becomes : http://url.com/#idModal . And if I hide it, the URL keeps #idModal even with `window.location`. I can't open an other modal window. Is there any way to recover the base url after hidding the modal? — Ty Yt, Oct 07 '15 at 07:39

Quentin Roy · Answer 3 · 2015-10-07T07:35:45.070

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");

function yourHandler(){
   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.

score 0 · Answer 4 · answered Oct 07 '15 at 07:10

0

Yep! Just set thee css property opacity

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

answered Oct 07 '15 at 07:10

Manu Masson

1,667
3
18
37

Thanks! On a click event on the img? – Ty Yt Oct 07 '15 at 07:11
Yep! If thats what you want. – Manu Masson Oct 07 '15 at 07:12

Set opacity with js or close modal window

4 Answers4

Linked