I have this code below that when clicked on the action, opens a box on the same page. It works. But when I click on x, the box closes, but the iframe does not. I would like to just show the box without the iframe or show the iframe, but at the same time that x is clicked, close both. It's possible?
<head>
<style>
ul{margin: 0px; padding: 0px; list-style: none;}
ul li{position: relative; display: inline-block;}
li ul{position: absolute; top: +33px; display: none;}
ul li a{display: block; padding: 7px; padding-left: 15px; padding-right: 15px; border: 1px solid #CCCCCC; font-size: 15px; margin-top: -4px; text-shadow: #000000 0px 0px 0px;}
li:hover ul{ display: inline-grid;}
#floatleft{float: left; margin: -7px 8px 0px -8px;}
</style>
</head>
<body>
<div id="janela" style="display: none; position: absolute;"><iframe id="iframejanela" name="iframejanela"></iframe></div>
<nav id="menu">
<ul><li id="floatleft" class="noclick"><a>Passe o mouse</a>
<ul id="width_cem"> <li><a href="#" id="padding" onClick="javascript: abrir(1);">Ação</a></li>
</ul></li></ul>
</nav>
</body>
<script>
function abrir(qm){
document.getElementById('janela').style.display='';
if(qm == 1){window.open('iframe2.php', "iframejanela");}
}
</script>
And this is what I wanted to open
<head>
<style>
.alert{padding: 20px; background-color: #EDEDED; color: #000000; cursor: default; width: 100px; height: 100px;}
.closebtn{margin-left: 15px; color: #000000; float: right; font-size: 22px; line-height: 20px; cursor: pointer;}
</style>
</head>
<body>
<div class="alert">
<span class="closebtn"
onClick="this.parentElement.style.display='none';">×</span>
Ação
</div>
</body>