Modal window in CSS




Explanation

In this article, I'll show an example of creating a modal window on the CSS. It's acting as a Bootstrap modal window. Link http://getbootstrap.com/javascript/#modals

 

Feature

The principle of showing and hiding the modal window as in other examples of the site based on tag input type="checkbox" and attached to it a tag label. But to make the call modal window on button and stowing it by clicking the gray substrate or the close button in the modal window, used a trick. Namely, several elements label linked with one element of the inputresponsible for showing/hiding the modal window.

  1. <input id="modal" type="checkbox">
  2. <label for="modal" id="modal-overlay"></label>
  3. <label for="modal" id="modal-button">Show Modal</label>
  4. <div id="modal-window">
  5. <label for="modal" id="modal-close">X</label>
  6. <p>Lorem ipsum ...</p>
  7. </div>

 

The substrate

Nothing fancy, plain block covering the whole screen, but to a property of the transition and after hiding (opacity: 0) was not clickable, I had to "hide" it using the properties of visibility. See an article about transition.

  1. #modal-overlay {
  2. position: absolute;
  3. display: block;
  4. top: 0;
  5. right: 0;
  6. bottom: 0;
  7. left: 0;
  8. background-color: #000;
  9. visibility: hidden;
  10. opacity: 0;
  11. transition: left 0s ease .3s,
  12. visibility .3s;
  13. }
  14. #modal:checked + #modal-overlay {
  15. visibility: visible;
  16. opacity: .5;
  17. transition: left 0s,
  18. visibility .3s;
  19. }

 

Window positioning

A window is hidden at the bottom with the property position: fixed, however, lies in the middle and never goes outside of the browser window width. This is achieved by using CSS rules left, right, max-width and margin: 0 auto;. Thus if the size of the browser window is greater than left right max-width, it is located in the middle and has a size of max-width, if less, then it decreases and is indented on the left and right equal left and right respectively.

  1. #modal-window {
  2. position: fixed;
  3. max-width: 800px;
  4. right: 20px;
  5. left: 20px;
  6. padding: 30px 40px;
  7. margin: 0 auto;
  8. box-sizing: border-box;
  9. bottom: -550px;
  10. border: 2px solid black;
  11. border-radius: 10px;
  12. background-color: white;
  13. transition: bottom .3s;
  14. }
  15. #modal:checked ~ #modal-window {
  16. bottom: 100px;
  17. }

 

Code see other items in the DEMO.

Live demo
Download ZIP







Found comments - 2






Alexy September 06, 2016
oops :) it should to be ; } (semicolon and brace) at the end, not a smile
Alexy September 06, 2016
Wow! Thank! I believe so will be better: #modal-window {top:200vh;} #modal:checked ~ #modal-window {top:25vh;} try to resize window for get the different.
Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C
:)

Designer avatar

Gender
Hairs/Hats Mouth
Eyes Glasses
Result