jQuery - display : none not working

jQuery - display : none not working

本文关键字：not working none display jQuery      更新时间：2023-09-26

我创建了一个网页，其中：

  • 当用户单击按钮时，会打开一个iframe
  • 我通过在css文件中创建iframe display:none来实现
  • 单击按钮后，display属性变为inline（通过jQuery）

但是，如iframe所示，还有一个close按钮。单击时，iframe display再次变为none。但是，问题是它不起作用。简而言之，来自关闭按钮的display:none不工作。

我的代码如下：

$(document).ready(function() { 
$("#a_addupdate").click(function(){
    $("#iframe_add_update").css(
        "display" , "inline"    
    );
 });
}); //This will show the iframe

$(document).ready(function() {
    $("#close_frame").click(function(){
        $("#iframe_add_update").css(
        "display" , "none"
        );
    });
} //This will hide the frame

编辑：我还在iframe 中使用z-index:2

如果关闭按钮在iframe上，则应使用：

// code in your iframe
$(document).ready(function() {
    $("#close_frame").click(function(){
        $("#iframe_add_update", window.parent.document).css(
        "display" , "none"
        );
    });
}

注意window.parent.document位。这将使您的代码在父页上搜索#iframe_add_update元素。

假设您的iframe中也有jQuery，并且它们都在同一域中，这将起作用。

您可以更新到此：

$(document).ready(function() {
  $("#iframe_add_update").contents().find("#close_frame").click(function() {
    $("#iframe_add_update").css("display", "none");
  });
}); //This will hide the frame

$("#iframe_add_update").contents()允许您查找iframe中的内容。

相关文章：