css/modal.css

   1 .backdrop {
   2         position: fixed;
   3         top: 0;
   4         left: 0;
   5         width: 100%;
   6         height: 100%;
   7         background-color: #000;
   8         z-index: 1;
   9 }
  10
  11 .modal {
  12         position: absolute;
  13         width: 60%;
  14         top: 10%;
  15         left: 20%;
  16         background-color: #272B30;
  17         color: #C8C8C8;
  18         padding: 0.7em;
  19
  20         transform: scale(1.5);
  21         -webkit-transform: scale(1.5);
  22         z-index: 2;
  23 }
  24
  25 .modal:after {
  26         position: absolute;
  27         content: "";
  28         bottom: -10%;
  29         height: 10%;
  30         width: 1px;
  31 }
  32
  33 .modal,.backdrop {
  34         transition: transform 0.6s, opacity 0.6s;
  35         -webkit-transition: transform 0.6s, opacity 0.6s;
  36         pointer-events: none;
  37         opacity: 0;
  38 }
  39
  40 .modal-open .modal {
  41         transform: scale(1);
  42         -webkit-transform: scale(1);
  43         opacity: 1;
  44         pointer-events: auto;
  45 }
  46
  47 .modal-open .backdrop {
  48         opacity: 0.7;
  49         pointer-events: auto;
  50 }