jQuery - display : none not working

Question

I created a webpage in which :

• When the user clicks a button a iframe opens
• I did it by making the iframe display:none in the css file
• When the button is clicked, the display property becomes inline (by jQuery)

But, as the iframe is shown, there's a close button also. Which is when clicked, the iframe display becomes none again. But, the problem is it's not working. In short, the display:none from the close button not working.

My codes are as following :

$(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

Edit: I'm also using z-index:2 for iframe

Answer 1

If the close button is on the iframe, you should use:

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

    });
}

Note the window.parent.document bit. This will make your code search for the #iframe_add_update element on the parent page.

This will work assuming you have jQuery in your iframe also and they are both in the same domain.

Answer 2

You can update to this:

$(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() lets you find the content inside the iframes.