1

This time, I'll include the code (as I've been asked previously). The problem is that, even when this code does what I need (a CSS modal/lightbox window), I can't get it to animate neither the top nor the translate properties. I think it's a problem of positioning, because, the original example used no position for the container but, instead, used the :before pseudo-element (I don't like it). What's wrong with this code.

<!DOCTYPE html> <html> <head> <meta charset="iso-8859-1" /> <title>Pure CSS Modal Window</title> <style> * { margin: 0px; padding: 0px; } .modal-container { position: fixed; display: none; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.75); } .modal-content { position: absolute; top: -100%; left: 50%; width: 70%; max-width: 400px; max-height: 400px; transform: translateX(-50%); background-color: #fff; padding: 20px; border-radius: 10px; overflow-y: auto; transition: all 5s; } .modal-container:target { display: block; } .modal-container:target .modal-content { top: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <a href="#modal1">Modal 1</a> <a href="#modal2">Modal 2</a> <div class="modal-container" id="modal1"> <div class="modal-content"> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <a href="#modal-close">Close</a> </div> </div> <div class="modal-container" id="modal2"> <div class="modal-content"> <p>This is the content of Modal 2</p> <a href="#modal-close">Close</a> </div> </div> </body> </html>
Improve this question

2 Answers 2

Reset to default
1

This is because the display state changes from display: none to display: block, meaning there is no previous layout to transition between.

One option would be to replace display: none with visibility: hidden and display: block with visibility: visible.

Working Example:

* { margin: 0px; padding: 0px; } .modal-container { position: fixed; visibility: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.75); } .modal-content { position: absolute; top: -100%; left: 50%; width: 70%; max-width: 400px; max-height: 400px; transform: translateX(-50%); background-color: #fff; padding: 20px; border-radius: 10px; overflow-y: auto; transition: all 5s; } .modal-container:target { visibility: visible; } .modal-container:target .modal-content { top: 50%; transform: translate(-50%, -50%); }
<a href="#modal1">Modal 1</a> <a href="#modal2">Modal 2</a> <div class="modal-container" id="modal1"> <div class="modal-content"> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <p>This is the content of Modal 1</p> <a href="#modal-close">Close</a> </div> </div> <div class="modal-container" id="modal2"> <div class="modal-content"> <p>This is the content of Modal 2</p> <a href="#modal-close">Close</a> </div> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks Alexander. I had just entered to close this question because I found another answer. Your's is great as well, but I solved it just separating both DIV's. I mean, instead of: <div class="container"> <div class="content"> </div> </div> <div class="container"> </div> <div class="content"> <p>Content here</p> </div> And for the CSS I used .container:target + .content & it worked perfectly. Thanks anyways. I'd use your tip for my future projects. Marcelo.
0

The solution provided by Alexander O'Mara works great (& also taught me a little), but I found another answer. I solved it just separating both DIV's. I mean, instead of:

<div class="container"> <div class="content"> <p>Content here</p> </div> </div>

I used:

<div class="container"> </div> <div class="content"> <p>Content here</p> </div>

And for the CSS I used:

.container:target + .content {}

instead of

.container:target .content {}

All this without changing "display: none" for "visibility: hidden", as Alexander suggested, & it worked perfectly. Thanks for your help. It's great to see that people around the world worries about other one's problems & try to solve them.

Cheers. Marcelo.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.