Doesn't show modal window

JavaScript
1

As planned, the model window should appear from the corner, and disappear, like a mouse not on an element of the model window, but my window just appeared, but after adding the condition, if nothing works,

 <div id="enterModal"><img src="/img/open.png" width="15px" height="15px">Войти</div>
                <div id="showModal">
                    <a href="/pablic/login.php">Log In</a>
                    <a href="/pablic/signup.php">Sign Up</a>
                </div>

css

#enterModal{
position: relative;
}
#showModal{
    display: none;
    width: 300px;
    height: 300px;
    background: rgb(252, 254, 252);
    position: absolute;
    right: 0;
    top: -10px;
    z-index: 99999;
    box-shadow: 0 0 15px gray;
    border-radius: 10px;
    transform: scale(0);
    transition: .5s;
} 
#showModal>a{
  display: grid;
    height: 40px;
    width: 90px;
    background: black;
    border-radius: 5px;
    color: white;
    justify-items: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 30px;
    
}

javascript

 enterModal.onclick = function () {
        showModal.style.display = "block";
        showModal.style.transform = "scale(1)";
        if (showModal.onmouseover != showModal) {
            showModal.style.display = "none";
        }
    }

First, I can’t get the window to appear on click and disappear as soon as the mouse leaves the window.

2

where do you define enterModal in javascript?

3

Is this what you want?

2 Likes
4

Maybe also add a click to close button so touch devices can play:)

1 Like
5

Very good pont!

I have updated the CodePen in Post #3

1 Like
7

yes that

8

yes,thanks

9

I have such a question, how to make the expansion expand and collapse in the perception LOGIN?
I was unable to raise the window to the parent element

<script>
document.querySelector("#enterModal").addEventListener("click",show);
document.querySelector("#showModal").addEventListener("mouseleave",hide);
document.querySelector("#closeModal").addEventListener("click",hide);

function show(){
    showModal.style.transform="scale(1)";
    showModal.style.right="130px";
    showModal.style.top="115px";
}
function hide(){
    showModal.style.transform="scale(0)";
    showModal.style.right="-5px";
    showModal.style.top="-5px";

}
</script>
10

In the CSS change transition from:
transition: transform 0.5s;

to:
transition: transform 0.5s, right 0.5s, top 0.5s;

11

transition: transform .5s, right 0.5s, top 0.5s; not works

12

I am not clear what you are trying to achieve.

Here is transition: transform 0.5s, right 0.5s, top 0.5s; working:

13

I just need to raise the model window to the desired element, the parent, so that it expands away from the parent.

#showModal{
    /* display: none; */
    width: 300px;
    height: 300px;
    background: rgb(252, 254, 252);
    position: absolute;
    right: -10px;
    top: -80px;
    z-index: 99999;
    box-shadow: 0 0 15px gray;
    border-radius: 10px;
    transform: scale(0);
    transition: 1s;
}

so why doesn’t it work?

14

Are you saying that you want the modal element to expand to the left of the <div id="enterModal"> element?

15

No, I want to exit with enterModal

like this

16

Like this?

17

no, you come out from around the corner, and I want to enter from the inscription

18

Like this from the left of the <button>?

Note 1: there are currently some ‘magic numbers’ in the CSS which is not good practice.

Note 2: the width of button plus modal panel is greater than the width of small smartphones,

1 Like
19

It doesn’t work for me like it does for you, the window appeared and immediately closed itself, I initially thought that it was easy for me to do this, but I don’t understand why such difficulties in simple things)
from the parent it does not appear for some reason.

20

Are you saying that my CodePen is OK but the code does not work when you insert the HTML, CSS and JavaScript into the web page you are developing?

I have just tried the CodePen in Post #18 on a smartphone. The modal panel appears when I click on the
Войти button and disappears when I click on the :heavy_multiplication_x: button. The layout of the modal panel is incorrect: I guess my smartphone’s browser is so old that it does not like display: grid. Also, surprisingly, the X is not red for some reason.

21 
<script>
document.querySelector("#enterModal").addEventListener("click",show);
document.querySelector("#showModal").addEventListener("mouseleave",hide);
document.querySelector("#closeModal").addEventListener("click",hide);

function show(){
    showModal.style.transform="scale(1)";
    showModal.style.right="130px";
    showModal.style.top="115px";
}
function hide(){
    showModal.style.transform="scale(0)";
    showModal.style.right="30px";
    showModal.style.top="-65px";
}
</script>

#showModal{
    /* display: none; */
    width: 300px;
    height: 300px;
    background: rgb(252, 254, 252);
    position: absolute;
    right: 30px;
    top: -65px;
    z-index: 99999;
    box-shadow: 0 0 15px gray;
    border-radius: 10px;
    transform: scale(0);
    /* transform-origin: top right;  */
    /* transition: transform 0.5s, right 0.5s, top 0.5s; */
    transition: 1s;
}

Thanks for pointing me in the right direction, I did the way the code should work