El estilo CSS es nulo

Tengo una página que se supone que debe mostrar un modal (superposición) cuando un usuario hace clic en una imagen o enlace en la página. Cuando la página se carga por primera vez, el modal está en blanco y oculto con este html:

<!--// MODAL: ITEM PROFILE //-->
<div id="profile" class="modal" style="visibility: hidden">
</div>
<!--// OVERLAY //-->
<div id="overlay" style="visibility: hidden"></div>

Cuando el usuario hace clic en una imagen o enlace, se supone que el modal se activa con esta función:

function itemModal(id){
var modal = $("#profile");
if (modal == null){
    alert("Modal not found!");
}

if($(" #profile").style.visibility == "hidden"){
    $.ajax
      (
        { //Ajax call to get item data
          type: "POST",
          url: "/organizer/getItem",
          data: { item_id: id },
          dataType: "html",
          success: function( responseText, textStatus, XHR )
          {
            // select the element with the ID profile and insert the HTML
            $("#profile" ).html( responseText );
            $("#profile").style.visibility = "visible";
            $("#overlay").style.visibility = "visible"
          }
        }
      );
  }
  else{ //Modal is being displayed, hide it and remove contents
    $("#profile").html('');
    $("#profile").style.visibility = "hidden"; 
    $("#overlay").style.visibility = "hidden";
  }
}

Sin embargo, cuando hago clic para activar el modal, aparece el mensaje de error Uncaught TypeError: Cannot read property 'visibility' of undefined. Puse la alerta para tratar de detectar esto y descubrí que, si bien el elemento de perfil existe, su estilo aparentemente no existe, aunque tiene definido CSS en línea, así como unas 250 líneas en otro archivo. ¿Por qué el atributo de estilo aparecería como nulo?

preguntado el 01 de julio de 12 a las 20:07

use el método css, no el estilo. api.jquery.com/css if($("#perfil").css("visibilidad") == "oculto")...algo así -

3 Respuestas

Los objetos jQuery no tienen propiedades de estilo, ya que son una matriz de objetos DOM (que sí tienen propiedades de estilo).

O quieres:

SET: $('#overlay').css('visibility', 'hidden')
GET: $('#overlay').css('visibility')

or

SET: $('#overlay')[0].style.visibility = 'hidden'
GET: $('#overlay')[0].style.visibility

Respondido 01 Jul 12, 21:07

Pensé que si solo hay un elemento, solo devolvería ese elemento, nunca hubiera adivinado que siempre devuelve una matriz. ¡Gracias! - jaime rump

está utilizando las propiedades de elemento sin procesar de Javascript en un objeto jQuery devuelto, y no funciona, debe usar css() método en su lugar:

if($("#profile").css('visibility') == "hidden")

Respondido 01 Jul 12, 20:07

Estás mezclando jQuery con JavaScript nativo.

Los elementos HTML nativos tienen un style object en ellos, los elementos envueltos en jQuery no. Si quieres usar jQuery, usa

if ($(" #profile").css('visibility') == "hidden")

Además, la siguiente línea no funcionará como usted pretende.

if (modal == null){

...porque el valor asignado a modal es nuevamente un elemento envuelto en jQuery. Un objeto jQuery, incluso si no logra hacer coincidir los elementos, siempre tiene un valor de "veracidad" cuando se evalúa; en otras palabras, nunca se evaluaría como nulo, falso o cualquier otro valor falso. En su lugar, use:

if (modal.length){

...o en otras palabras, "si el selector jQuery encontró algún elemento..."

Por último, como un punto menor, no se trata de ventanas modales en el verdadero sentido. Esto es DHTML; Las ventanas modales son una forma de funcionalidad de navegador de nivel inferior que implica que el usuario tenga que interactuar con ella antes de que se le permita volver a la aplicación principal (por ejemplo, una alerta).

Respondido 01 Jul 12, 20:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.