Question

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?

Answer 1

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