Tenho este código abaixo que quando clicado na ação, abre uma caixa na mesma página. Funciona. Porém quando clico no x, a caixa fecha, mas o iframe não. Gostaria de só mostrar a caixa sem o iframe ou mostrar o iframe, mas na mesma hora que o x for clicado, fechar os dois. É possível?
<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>
E isto é o que queria abrir
<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>
this.parentElement
do elementospan
será o elementodiv.alert
, por isso apenas ele é ocultado. Estou pesquisando ainda se é possível buscar a referência do iframe dentro do mesmo.