How to darken all the elements except an iframe?

Question

How to darken all the elements except an iframe?

Navigation

#1 by (1 votes)

0

Hi, I have a page where clicking on a video title opens a player in the middle of the screen.
Attached photo:

What I do not know how to do is to select all the elements that are not this player and make them darken. The closest thing I've found has been this (taken from another Stack Overflow thread):

p.title:not(:first-of-type)

But it does not work for what I want since not all the elements are p (nor any similar type between them) nor of the same class. I've tried this but it only darkens the player:

$("#foto1").click(function(){
	$("#video1").fadeIn(1000);
	$("#x").show();
	$("iframe:not()").css("opacity","0.6");
});

If you need more code, say it in the comments, although I think that will be necessary, since it is only that line of code that I can not get it to work properly. Greetings.

javascript jquery css

asked by Mikel Molinuevo 07.11.2017 в 09:22

source

1 answer

Get a query from a table [closed] Store a multidimensional array in a variable without knowing how many rows it will get (Javascript)

score 1 · Accepted Answer

What I would do, which is simple and works as you want and does not change your page model, is the following:

A div with position fixed, width and height at 100%, that occupies the whole page and has a z-index much greater than all the elements of the page (except the video), which is a black color with an alpha value: rgba (0,0,0,0,6), and a display none.
This div puts you at the beginning of your code and when you click on a title and open the video, at the same time you make a display block on the div, which darkens everything and you will not be able to click on them. elements other than video.
When you click on that div, the video is minimized, the div is hidden and the web returns to normal.

I hope you have understood, I give example:

Javascript to get the video and the black background

$("#foto1").click(function(){
    $("#video1").fadeIn(1000);
    $("#div_negro").show();
});

HTML of the div in question

<div id="div_negro"></div>

CSS of the div

#div_negro{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9000;
    display: none;
}

CSS setting for videos (so that it always looks on top of the black div)

.clase_que_tenga_el_video{
    z-index: 9999; /* para que este siempre encima del div negro */
}

Javascript to hide the video by clicking anywhere on the black div

$("#div_negro").click(function(){
    //Esto oculta cualquier video, para que el div_negro funcione con 
    //cualquiera
    $(".clase_que_tenga_el_video").fadeOut(1000);
    $("#div_negro").hide();
});