通过单击div中的按钮关闭div

Question

I want to close the main div by clicking close button which is inside that div. 我想通过单击该div内的关闭按钮来关闭主div。 What JavaScript code do I need to write in iframe to achieve it? 为此，我需要在iframe中编写哪些JavaScript代码？

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 :- 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. 由于您的iFrame位于同一域中，因此有一种方法可以做到这一点。 For example, 例如，

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

Then inside the iFrame something like this should do the trick: 然后在iFrame中执行以下操作：

<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: 特定于您iFRAME内的代码，它需要改为：

    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 - 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: 如果可以使用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. 在这里， “＃Closebtn_ID”将是您要在其中附加点击处理程序的iFrame中按钮的ID。

通过单击div中的按钮关闭div

问题描述

2 个解决方案

解决方案1
-1 已采纳 2015-09-03 21:08:47

解决方案2
-1 2015-09-03 21:16:00

通过单击div中的按钮关闭div

问题描述

2 个解决方案

解决方案1 -1 已采纳 2015-09-03 21:08:47

解决方案2 -1 2015-09-03 21:16:00

解决方案1
-1 已采纳 2015-09-03 21:08:47

解决方案2
-1 2015-09-03 21:16:00