I have a webpage where I want to display a modal overlay when a user clicks on an image or link. Initially, the modal is hidden and empty using this HTML:
<!--// MODAL: ITEM PROFILE //-->
<div id="profile" class="modal" style="visibility: hidden">
</div>
<!--// OVERLAY //-->
<div id="overlay" style="visibility: hidden"></div>
To trigger the modal when a user interacts with an image or link, I use 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 trying to trigger the modal, I encounter the error message
Uncaught TypeError: Cannot read property 'visibility' of undefined