0

Tenho uma modal que abre quando o mouse sai da pagina. O problema é que quando eu tento fechar no X, ela não fecha:

<!DOCTYPE html>
<html lang="en" onmouseleave="Open('openModal')">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="style.css">

<title>Document</title>
</head>
<body>


 <div id="openModal" class="modalDialog" >
     <div>
        <a href="#close" title="Close" onclick="close('openModal')" 
 class="close">X</a>
        <h2>Modal Box</h2>
        <p>1 paragrafo.</p>
        <p>teste teste teste  teste teste teste v</p>
    </div>
</div>




<script>
    function Open(x) {
        x = document.getElementById("openModal").style.opacity = "1";

    }
    function close(x){
        y = document.getElementById("openModal").style.opacity = "0";
    }
</script> 
</body>
</html>

7
  • Faltou postar o código JavaScript que abre sua modal... @questão: Já tentou adicionar um evento mouseout em cima do body?
    – LipESprY
    Commented 8/01/2019 às 23:16
  • Ainda não tenho, pois não tenho ideá de como fazer, sou iniciante, ainda tenho dificuldade
    – user135751
    Commented 8/01/2019 às 23:18
  • @LipESprY Não, vou tentar
    – user135751
    Commented 8/01/2019 às 23:19
  • "- eu consigo abrir com um link" O link "puro" não abre o modal. Ele apenas "rola" a página até onde está o objeto ancorado via id. Edite a pergunta aí e posta sua página completa em um snippet. Dado o seu nível como iniciante, talvez o código esteja lá e você não sabe. ;D
    – LipESprY
    Commented 8/01/2019 às 23:24
  • @LipESprY Vlw pela dica! Vou alterar
    – user135751
    Commented 8/01/2019 às 23:28

1 Resposta 1

2

Vê se é disso que precisa:

<!DOCTYPE html>
<html lang="en" onmouseleave="abreModal()">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">

    <title>Document</title>
    <script type="text/javascript">
        function abreModal() {
            document.getElementById("openModal").style.opacity = "1";
            document.getElementById("openModal").style.display = "block";

        }
        function fechaModal(){
            document.getElementById("openModal").style.opacity = "0";
            document.getElementById("openModal").style.display = "none";
        }
    </script>
</head>
<body>

     <div id="openModal" class="modalDialog">
         <div>
            <a href="#close" title="Close" onclick="fechaModal();" class="close">X</a>
            <h2>Modal Box</h2>
            <p>1 paragrafo.</p>
            <p>teste teste teste  teste teste teste v</p>
        </div>
    </div>

</body>

O problema do seu código foi utilizar o nome close na sua função. Existe um método com este mesmo nome. Veja mais em:

Window close() Method

Repare que renomeei as suas funções, tirei os parâmetros desnecessários e reorganizei seu código... Inclusive carregar as funções antes do carregamento da página em si.

3
  • Era isso mesmo! Muito Obrigado!!
    – user135751
    Commented 9/01/2019 às 2:43
  • @AndreFirmo É bom que, a partir de agora, você não vai mais colocar nomes comuns nas suas funções, como open(), close(), run(), get(), etc... ;D
    – LipESprY
    Commented 9/01/2019 às 2:45
  • 1
    pode deixar @LipESprY
    – user135751
    Commented 9/01/2019 às 2:55

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