Modal dialog is not closing

Question

Modal isn't closing instead it translates
https://code.sololearn.com/WhoNrk6iui16/?ref=app

Answer 1

There are many ways for example modal.style.visibility = "hidden".
But that what said the framework you use is not working?

Answer 2

Maybe it depends from used editor here by SL. Did you try it in different browsers (it‘s a must for a frondend developer)? By the way for full functionality will be needed a web server environment.

Answer 3

Testing with localhost is enough good.
Indiphile Menziwa could you save the previous version of the code I‘d like that what I had overlooked.

Answer 4

Yes, I did change the code yesterday and add the inset and I wondered why that work too, why I asked old code. That was something with the cdn.

Answer 5

Thanks it's now working. 😸

But my question is why is it not working?? Guess I'll have to go and figure that one to avoid similar problems in the future

Answer 6

No it was just that I used inset : 0 to center stuff inside on the dialog modal which messed up it's functionality making it display before function was called etc...
So it's not SL this time...

I haven't tested it yet, but thanks for the heads up

Answer 7

Sorry question what do you mean by web server environment like to get a domain, host over Bluehost and make it excessable online??

Answer 8

Indiphile Menziwa you need to revert your code to the version that wasn't working correctly, if you want the others to help you with the investigation of that issue. (Just make a copy of the code).

And it would be best if you also describe _all_ the differences between the working code and the problem code.

Answer 9

https://code.sololearn.com/Wn1StepfGGp4/?ref=app
Check #modal-instruction in CSS

Before:
#modal-instructions{
width:90vw;
height:50vh;
position:absolute ;
inset:0;
margin:auto;
border:none;
border-radius:25px;
...

After:

#modal-instructions{
width:90vw;
height:50vh;
position:absolute ;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:none;
border-radius:25px;
background: linear-gradient(to right ,#d7d0fa,#d1b9f7);
/*background: linear-gradient(to right ,#d04ed6,#834d9b);*/
}

It's the only thing I changed on it was that honestly then it worked, In the end I added nothing on js not even that code you suggested,sorry about that . And the strange thing is it's now working even though before it didn't And this is purely Vanilla Javascript no frameworks I haven't learnt any of those(if the cdn link is the reason you think that it's just a font awesome link), maybe SL was just acting up in the end...

Answer 10

Lol guess I should be a detective then.

Never thought I'd speak with a person who can actually understand what a person what I'm saying, let alone have a conversation. I have no such friends who understand coding.
love SL