我有一个脚本,我需要运行只有一个叠加是不可见的.

所以我使用了以下脚本：

示例如下,按钮显示/隐藏叠加.控制台日志结果

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

EDIT: following correcting . for # due to it being an id not a class. Now, when my overlay is NOT on the screen. It returns
‘visible’.

此脚本始终返回“可见”.救命！！

谢谢

解决方法:

需要使用if($(‘div#overlay’).is(‘：visible’)){因为overlay是id而不是class： –

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

如果(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();" />

原因：-

根据文档：-https://api.jquery.com/visible-selector/

如果元素占用文档中的空间,则认为元素是可见的.

由于overlay div始终具有可见性：隐藏所以基本上它的空间就在那里,这就是原因：可见总是返回true.

如果你想使用：visible然后执行display：none;和显示：块;