Is (: visible) returns true even if the overlay is hidden by jQuery

Question

I have a script that I need to run only the overlay, not visible.

So, I used the following script:

Example below, the button shows / hides the overlay. Console Log Result

function overlay() {
  if( $('div#overlay').is(':visible') ){
   	    console.log("visible");
	}
	else {
	    console.log("not visible");
    }
};

#overlay {
     visibility: hidden;
     position: fixed;
     left: 0px;
     top: 0px;
     width:40%;
     height: 40%;
     text-align:center;
     z-index: 1000;
     display: inline-block;
     background-color: orange;
     /*Flexbox*/
     display: flex;
     align-items: center;
     align-content: center;
     justify-content: center;
}

form.overlay-form {
     width:780px;
}
table.overlay-table {
	position: relative;
	text-align: center;
}
table.overlay-table tr td {
	background: rgb(54, 25, 25); 
	background: rgba(54, 25, 25, 0); 
	border-style: none;
	margin-right: 40%;
	margin-bottom: 30%;
	position: relative;
	text-align: center;
	width: 800px;
}
.button {
  z-index:1000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="overlay">
    Overlay showing
</div>
</br></br></br></br>
</br></br></br></br>
<input id="clickMe" class="button" type="button" value="clickme" onclick="overlay();" />

Run codeHide result

EDIT : after fix. for # because it is id and not a class. Now that my overlay is NOT on the screen. It returns 'Visible'.

This script always returns "visible". Help!!

thank

Answer 1

if( $('div#overlay').is(':visible')){, overlay id not class: -

if( $('div#overlay').is(':visible')){
   console.log("visible");
}else {
   console.log("not visible");
}

if( el.style.visibility =='visible' ){, : -

function overlay() {
	el = document.getElementById("overlay");
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  if( el.style.visibility =='visible' ){
   	    console.log("visible");
	}
	else {
	    console.log("not visible");
    }
};

#overlay {
     visibility: hidden;
     position: fixed;
     left: 0px;
     top: 0px;
     width:40%;
     height: 40%;
     text-align:center;
     z-index: 1000;
     display: inline-block;
     background-color: orange;
     /*Flexbox*/
     display: flex;
     align-items: center;
     align-content: center;
     justify-content: center;
}

form.overlay-form {
     width:780px;
}
table.overlay-table {
	position: relative;
	text-align: center;
}
table.overlay-table tr td {
	background: rgb(54, 25, 25); 
	background: rgba(54, 25, 25, 0); 
	border-style: none;
	margin-right: 40%;
	margin-bottom: 30%;
	position: relative;
	text-align: center;
	width: 800px;
}
.button {
  z-index:1000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay">
    Overlay showing
</div>
</br></br></br></br>
</br></br></br></br>
<input id="clickMe" class="button" type="button" value="clickme" onclick="overlay();" />

Hide result

: -

: - https://api.jquery.com/visible-selector/

, .

overlay div visibility:hidden, :visible true.

:visible, display:none; display:block;

Answer 2

. overlay - id,

if( $('div.overlay').is(':visible')){
    console.log("visible");
}

if( $('div#overlay').is(':visible')){
    console.log("visible");
}