0

当用户单击页面上的图像或链接时，我有一个页面应该弹出模式（覆盖）。当页面第一次加载时，模态框是空白的并且被这个 html 隐藏：

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

当用户单击图像或链接时，应该使用此功能触发模态：

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

但是，当我单击触发模式时，我收到错误消息Uncaught TypeError: Cannot read property 'visibility' of undefined。我发出警报试图捕捉到这一点，发现虽然 profile 元素存在，但它的样式显然不存在，即使它定义了内联 css 以及另一个文件中的大约 250 行。为什么样式属性会显示为空？

4

3 回答 3

6

jQuery 对象没有样式属性，因为它们是 DOM 对象数组（它们确实具有样式属性）。

你要么想要：

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

或者

SET: $('#overlay')[0].style.visibility = 'hidden'
GET: $('#overlay')[0].style.visibility
于 2012-07-01T19:57:32.963 回答
1

您在返回的 jQuery 对象上使用 Javascript 原始元素属性，但它不起作用，您应该改用css()方法：

if($("#profile").css('visibility') == "hidden")
于 2012-07-01T19:58:03.917 回答
1

您正在将 jQuery 与本机 JavaScript 混合使用。

原生 HTML 元素上有一个style对象，jQuery 包装的元素没有。如果要使用 jQuery，请使用

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

此外，以下行将无法按您的意愿工作。

if (modal == null){

...因为分配给的值modal又是一个 jQuery 包装的元素。一个 jQuery 对象，即使它无法匹配元素，在评估时总是具有一个“真实”值——换句话说，它永远不会评估为 null、false 或任何其他虚假值。而是使用：

if (modal.length){

...或者换句话说，“如果 jQuery 选择器找到任何元素...”

最后，作为更次要的一点，您不是在处理真正意义上的模态窗口。这是 DHTML；模态窗口是一种较低级别的浏览器功能形式，涉及用户在被允许返回父应用程序之前必须与其交互（例如警报）。

于 2012-07-01T19:59:08.323 回答