jQuery

Question

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

当用户单击按钮时，iframe 打开
我通过在 css 文件

display:none

当按钮被点击时，display 属性变成 inline (by 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

Answer 1

如果关闭按钮在 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 并且它们都在同一个域中，这将起作用。

Answer 2

你可以更新到这个：

$(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 中的内容。

jQuery - 显示：none 不工作

jQuery - display : none not working

javascript

html

css

iframe