Tengo un script que necesito ejecutar, solo una superposición no está visible.
Así que he usado el siguiente script:
Ejemplo a continuación, el botón muestra/oculta la superposición. Resultado de los registros de la consola
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();" />EDITAR : siguiente corrección. para # debido a que es una identificación, no una clase. Ahora, cuando mi superposición NO está en la pantalla. Devuelve 'visible'.
Este script siempre devuelve "visible". ¡¡Ayuda!!
Gracias
Estás casi allí con un pequeño error. Dado que overlay es id,
if( $('div.overlay').is(':visible')){ console.log("visible"); }Debiera ser
if( $('div#overlay').is(':visible')){ console.log("visible"); }Necesita usar if( $('div#overlay').is(':visible')){ porque la overlay es id no class :-
if( $('div#overlay').is(':visible')){ console.log("visible"); }else { console.log("not visible"); } Para responder a su pregunta actual, use if( el.style.visibility =='visible' ){ como a continuación:-
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();" />Razón:-
Basado en documentación: - https://api.jquery.com/visible-selector/
Los elementos se consideran visibles si ocupan espacio en el documento.
Dado que superposición div siempre tiene visibility:hidden , básicamente su espacio está allí y es por eso que :visible siempre devuelve verdadero.
Si desea usar :visible , entonces haga display:none; y display:block;