I have a page that is supposed to pop up a modal(overlay) when a user clicks an image or link on the page. When the page first loads, the modal is blank and hidden with this html:

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

When the user clicks an image or link, the modal is supposed to be triggered using this function:

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";
  }
}

However, when I click to trigger the modal, I get the error message Uncaught TypeError: Cannot read property 'visibility' of undefined. I put in the alert to try to catch this and found that while the profile element exists, it's style apparently does not even though it has inline css defined for it, as well as about 250 lines in another file. Why would the style attribute be showing up as null?

I have a page that is supposed to pop up a modal(overlay) when a user clicks an image or link on the page. When the page first loads, the modal is blank and hidden with this html:

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

When the user clicks an image or link, the modal is supposed to be triggered using this function:

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";
  }
}

However, when I click to trigger the modal, I get the error message Uncaught TypeError: Cannot read property 'visibility' of undefined. I put in the alert to try to catch this and found that while the profile element exists, it's style apparently does not even though it has inline css defined for it, as well as about 250 lines in another file. Why would the style attribute be showing up as null?

• javascript
• jquery
• html
• css

• use the css method, not style. api.jquery./css if($("#profile").css("visibility") == "hidden")...something like that – Isaac Fife Commented Jul 1, 2012 at 19:59

3 Answers 3

jQuery objects don't have a style properties, as they're an array of DOM Objects (which do have style properties).

You either want:

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

or

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

you are using Javascript raw Element properties on a returned jQuery object, and it doesn't work, you should use css() method instead:

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

You're mixing jQuery with native JavaScript.

Native HTML elements have a style object on them, jQuery-wrapped elements do not. If you want to use jQuery, use

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

Also, the following line will not work as you intend.

if (modal == null){

...because the value assigned to modal is again a jQuery-wrapped element. A jQuery object, even if it fails to match elements, always has a 'truthy' value when evaluated - in other words, it would never evaluate to null, false or any other falsy value. Instead use:

if (modal.length){

...or in other words, "if the jQuery selector found any elements..."

Lastly, as a more minor point, you're not dealing with modal windows in the true sense. This is DHTML; modal windows are a form of lower-level browser functionality that involves the user having to interact with it before being allowed to return to the parent application (e.g. an alert).