How to close modal by clicking on X?

Asked

Viewed 381 times

0

I have a modal that opens when the mouse leaves the page. The problem is that when I try to close on X, she doesn’t close:

<!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>

javascript html

  • Failed to post the Javascript code that opens your modal... @question: Already tried to add an event mouseout on top of the body?

  • I don’t have it yet, because I have no idea how to do it, I’m a beginner, I still have difficulty

  • @Lipespry No, I’ll try

  • "- i can open with a link" The "pure" link does not open the modal. It just "scrolls" the page to where the anchored object is via id. Edit the question and put your full page on a snippet. Given your level as a beginner, maybe the code is there and you don’t know. ;D

  • @Lipespry Vlw for the tip! I will change

  • No, mate! kkkkk! Snippet is where you will paste the source code of your page with the modal... See this image: https://i.stack.Imgur.com/Uo2ve.png In this case, you enter ALL the code. If necessary, I or another colleague edit your question by removing what is not necessary. ;D

  • @Lipespry I made some changes

Show 2 more comments

1 answer

2


See if that’s what you need:

<!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>

Your code problem was using the name close in its function. There is a method with the same name. See more in:

Window close() Method

Note that I renamed your functions, removed the unnecessary parameters and reorganized your code... Including loading the functions before loading the page itself.

  • That’s right! Thank you very much!!

  • @Andrefirmo It is good that, from now on, you will no longer put common names in your functions, as open(), close(), run(), get(), etc... ;D

  • 1

    can leave @Lipespry

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.