Close a div by clicking a button inside the div

Question

I want to close the main div by clicking close button which is inside that div. What JavaScript code do I need to write in iframe to achieve it?

Main Page :-

<html>
<head>
<script type="text/javascript">
 function showhide()
 {
       var div = document.getElementById("newpost");
if (div.style.display !== "none") {
    div.style.display = "none";
}
else {
    div.style.display = "block";
}
 }
</script>
<style>
#newpost {
z-index: 1;
display:none;
background-color: rgba(255,255,255,0.9);
position:fixed;
width:100%;
height:100%;
overflow:auto;
}
#myframe {
z-index: 2;
position:fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="newpost" id="newpost">
<div class="myframe" id="myframe"><iframe id="signup_frame1" width="750" height="420" src="iframe.html" frameborder="0" allowfullscreen></iframe></div>
</div>
<FONT COLOR="#696969" onclick="showhide()"><span style="cursor:pointer">Show div</span></font>
</body>
</html>

iframe.html :-

<html>
<head>
<script type="text/javascript">
 function showhide()
 {
       var div = document.getElementById("newpost");
if (div.style.display !== "none") {
    div.style.display = "none";
}
else {
    div.style.display = "block";
}
 }
</script>
</head>
<body>
<FONT COLOR="#696969" onclick="showhide()"><span style="cursor:pointer">Close div</span></font>
</body>
</html>

Answer 1

Since your iFrame is on the same domain there is a way to do this. For example,

<div id="close">
    <iframe src="/HTMLPage2.htm">
    </iframe>
</div>

Then inside the iFrame something like this should do the trick:

<script>
    function closeDiv() {
        window.parent.document.getElementById("close").style.display = "none";
    }
</script>
<input value="close div" type="button" onclick="closeDiv()"/>

Specific to the code that is inside your iFRAME, it needs to be this instead:

    function showhide() {
        var div = window.parent.document.getElementById("newpost");
        if (div.style.display !== "none") {
            div.style.display = "none";
        }
        else {
            div.style.display = "block";
        }
    }

All said and done, your code should be this:

Main page -

<html>
<head>
    <script type="text/javascript">
        function showhide() {
            var div = document.getElementById("newpost");
            if (div.style.display !== "none") {
                div.style.display = "none";
            }
            else {
                div.style.display = "block";
            }
        }
    </script>
    <style>
        #newpost
        {
            z-index: 1;
            background-color: rgba(255,255,255,0.9);
            position: fixed;
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        #myframe
        {
            z-index: 2;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="newpost" id="newpost">
        <div class="myframe" id="myframe">
            <iframe id="signup_frame1" width="750" height="420" src="/iframe.htm" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
    <font color="#696969" onclick="showhide()"><span style="cursor: pointer">Show div</span></font>
</body>
</html>

iframe -

<html>
<head>
<script type="text/javascript">
    function showhide() {
        var div = window.parent.document.getElementById("newpost");
        if (div.style.display !== "none") {
            div.style.display = "none";
        }
        else {
            div.style.display = "block";
        }
    }
</script>
</head>
<body>
<FONT COLOR="#696969" onclick="showhide()"><span style="cursor:pointer">Close div</span></font>
</body>
</html>

Answer 2

If you can use jQuery:

$('#signup_frame1').load(function(){

    var iframe = $('#signup_frame1').contents();

    iframe.find("#Close_btn_ID").click(function(){
           $("#myframe").hide();
    });
});

Here, "#Closebtn_ID" will be the ID of the Button inside iFrame where you want to attach the click handler.

Close a div by clicking a button inside the div

Question

2 answers

solution1
-1 ACCPTED 2015-09-03 21:08:47

solution2
-1 2015-09-03 21:16:00

Close a div by clicking a button inside the div

Question

2 answers

solution1 -1 ACCPTED 2015-09-03 21:08:47

solution2 -1 2015-09-03 21:16:00

solution1
-1 ACCPTED 2015-09-03 21:08:47

solution2
-1 2015-09-03 21:16:00