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

HTML Create a Modal Window with CSS

Posted by Anthony T
Anthony T
7,968 Points

Can you create a modal window for an image with this method?

I would like to create an image modal when a thumbnail is clicked. Is it possible to do it with the CSS method explained on this video: https://teamtreehouse.com/library/create-a-modal-window-with-css-2

<div class="modal">
        <input id="modal__trigger" type="checkbox">
        <label for="modal__trigger">Launch Modal</label>
        <div class="modal__overlay">
          <div class="modal__wrap">
            <label for="modal__trigger">&#10006;</label>
            <h2>This is your modal content</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p> 
          </div>
        </div>
      </div>
Sam Gord
Sam Gord
14,084 Points
Sam Gord
Sam Gord
14,084 Points

it is possible to do such thing but with "what" method exactly? :D you can do this with a little bit of javascript or very little of Jquery or a little more of css ( if u want to do it pure css way ). so which method is on your mind? let me know and i'll make a demo/pen for u ;)

1 Answer

Sam Gord
Sam Gord
14,084 Points
Sam Gord
Sam Gord
14,084 Points

ok i see, yes its possible, i played around with the sample code we make in this workshop and here's what i could build .

https://codepen.io/simonestic/pen/OoKpKZ

examine it , hope it helps.

p.s : for light boxes ( modal windows that show anything but mostly images or videos ) you can use these two amazing plugins too.

https://lokeshdhakar.com/projects/lightbox2/

http://fancyapps.com/fancybox/3/