Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Create a Modal Window with CSS

Posted by John Balladares
John Balladares
Courses Plus Student 9,828 Points

I've Implemented this Modal in Production - Check it Out

Hi Treehouse community,

I just wanted to share an example of this fullscreen modal being used on a production website. I do marketing for the company I work for and used it as a way to help collect leads prior to a show.

Any feedback would be much appreciated!

Link: http://corp.healthline.com/

David Conner
David Conner
Treehouse Guest Teacher
David Conner
David Conner
Treehouse Guest Teacher

John Balladares great job! This looks really good and it is the perfect use for a modal. Thanks for watching and sharing. Its cool to see this stuff in the wild.

I notice when you close the modal the background disappears before the rest of the content fades away. Is there a reason you can't just leave the height at 100% for the modal overlay? When I change that one property the issue goes away and the closing transition looks smoother. There may be a reason for doing this, I just took a quick look.

Anyways, keep up the great work and continue to share!

John Balladares
John Balladares
Courses Plus Student 9,828 Points

I tried so hard to stop the modal from fading out in that delayed way but just could not figure out how to fix it. I even asked a few front end developers at work if they had any idea what was going on. Would you mind sharing what line of css you're finding the height changing from 100%?

6 Answers

David Conner
STAFF
David Conner
Treehouse Guest Teacher
David Conner
David Conner
Treehouse Guest Teacher

John Balladares

*Your Current Code: *

.modal__overlay {
  opacity: 0;
  height: 0;
  z-index: -100;
  transform: scale(.5);
  -webkit-transform: scale(.5);
  -ms-transform: scale(.5);
  transition: all .75s cubic-bezier(.68,-.55,.265,1.55),height 1ms;
}

input.modality:checked~.modal__overlay {
  opacity: 1;
  height: auto;
  transform: scale(1);
  -webkit-transform: scale(1);
  z-index: 800;
}

*Suggested changes: *

.modal__overlay {
  opacity: 0;
  height: 100%; //changed from 0 to 100%
  z-index: -100;
  transform: scale(.5);
  -webkit-transform: scale(.5);
  -ms-transform: scale(.5);
  transition: all .75s cubic-bezier(.68,-.55,.265,1.55); //removed the height transition
}

input.modality:checked~.modal__overlay {
  opacity: 1;
//removed height declaration altogether
  transform: scale(1);
  -webkit-transform: scale(1);
  z-index: 800;
}

I am suggesting that you leave the modal overlay height at 100%.

The issue stems from the browsers inability to transition height to a variable size. If you were going from 0 to 100px it would work but from 0 to auto or even 100% will just not work. From what I can tell leaving the modal overlay height at 100% will allow you to get the effect you are looking for.

Hope that helps

Michalis Efstathiou
PLUS
Michalis Efstathiou
Courses Plus Student 4,638 Points
Michalis Efstathiou
Michalis Efstathiou
Courses Plus Student 4,638 Points

awesome, very nice website

John Balladares
PLUS
John Balladares
Courses Plus Student 9,828 Points
John Balladares
John Balladares
Courses Plus Student 9,828 Points

Ah, thanks a ton David! Should be working now.

Yann Vanhalewyn
Yann Vanhalewyn
18,687 Points
Yann Vanhalewyn
Yann Vanhalewyn
18,687 Points

Hey John!

The website looks great. Is the dropdown form still on there? I've been looking for it, but it appears to have been commented out :).

I've used this technique a couple of times also, but I'm having an issue with Chrome and Chromium when (and only when) the modal includes a form>input[type=text]. Here's my issue, with a gif for visualization. I'm wondering if you've had the same issues and if you've come up with a solution.

Cheers!

John Balladares
PLUS
John Balladares
Courses Plus Student 9,828 Points
John Balladares
John Balladares
Courses Plus Student 9,828 Points

Hi Yann Vanhalewyn , I have since taken it down but you can still find it at corp-stage.healthline.com . Hm, your bug seems very odd! When you inspect element is that white space caused by the input field?

Yann Vanhalewyn
Yann Vanhalewyn
18,687 Points
Yann Vanhalewyn
Yann Vanhalewyn
18,687 Points

Yes, the white space is actually the input field. I have oversimplified the markup and styling a ton to just see the bug. (orange is the modal, white box is the input field). The weirdest thing is that if the input field is not in form tags, this behaves as expected. I still haven't figured this one out and I eat weird bugs for breakfast! It seems like Chrome interprets the 'transition' property before the 'transform' property.

John Balladares
John Balladares
Courses Plus Student 9,828 Points

Yann Vanhalewyn maybe you can create a codepen with the code you're using or share the URL? I'd love to see if I could help and I'm sure lots of other treehouse community members would like to help you debug this!