0

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';">&times;</span>
            Ação
    </div>
</body>
1
  • Primeiro que this.parentElement do elemento span será o elemento div.alert, por isso apenas ele é ocultado. Estou pesquisando ainda se é possível buscar a referência do iframe dentro do mesmo.
    – Woss
    Commented 27/04/2017 às 13:52

1 Resposta 1

0

Primeiro, apenas a div.alert é ocultada pois o this.parentElement faz referência a este elemento apenas, pois busca-se só o primeiro elemento pai. Para ocultar o elemento iframe, você precisa fazer:

onclick="window.frameElement.parentElement.style.display='none';"

Pois window.frameElement fará referência ao elemento iframe onde a página é exibida e, portanto, window.frameElement.parentElement fará referência ao elemento div#janela.

Veja funcionando aqui.

5
  • Obrigado, outra pergunta, está aparecendo só uma vez, por exemplo, se tentar clicar na ação aparece normalmente, mas se fechar e abrir novamente não resulta em nada, o que poderia ser feito?
    – MrVanDaime
    Commented 27/04/2017 às 14:08
  • @MrVanDaime corrigi a resposta. Eu havia ocultado o elemento iframe, enquanto deveria ser ocultado a div #janela. A única alteração foi adicionar .parentElement após window.frameElement.
    – Woss
    Commented 27/04/2017 às 14:15
  • É, faça esta modificação que fiz que irá funcionar conforme o esperado.
    – Woss
    Commented 27/04/2017 às 14:19
  • Ok, obrigado novamente, só isso por hora.
    – MrVanDaime
    Commented 27/04/2017 às 14:25
  • Você pode aceitar a resposta clicando no no lado esquerdo da mesma.
    – Woss
    Commented 27/04/2017 às 14:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .