susmodal/src/modal.css

Simple library for displaying modals

  /* Background of the modal */
  .susmodal {
    display:  none; 
    position: absolute; 
    z-index: 1000; 
    padding-top: 100px; 
    left:   0;
    top:    0;
    right: 0;
    bottom: 0;
    width:  100%;
    height: 100%;
    overflow: auto;  
  }
  
  /* MODAL CONTENT */
  .susmodal-content {
    position: relative;
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.534);
    pointer-events: auto;
  }

  .susmodal-footer {
    padding: 5px;
  }
  
  /* BACKGROUND ANIMATION FOR ALL MODAL APPARITIONS */
  .susmodal-body-animation {
    animation-name: susmodal-body-animation;
    background-color: rgba(0, 0, 0, 0.473)
  }
  
  @-webkit-keyframes susmodal-body-animation {
    from {background-color: white} 
    to   {background-color: rgba(0, 0, 0, 0.473)}
  }
  
  @keyframes susmodal-body-animation {
    from {background-color: white}
    to   {background-color: rgba(0, 0, 0, 0.473)}
  }
  
  /* BACKGROUND ANIMATION REVERSE */
  .susmodal-body-animation-reverse {
    animation-name: susmodal-body-animation-reverse;
    background-color: white
  }
  
  @-webkit-keyframes susmodal-body-animation-reverse {
    from {background-color: rgba(0, 0, 0, 0.473)} 
    to   {background-color: white}
  }
  @keyframes susmodal-body-animation-reverse {
    from {background-color: rgba(0, 0, 0, 0.473)}
    to   {background-color: white}
  }
  
  /* OPEN THE MODAL WITH FADE  *********************/
  .susmodal-animation-fade {
    animation-name: susmodal-animation-fade;
  }

  /* Animation when user open modal */
  @-webkit-keyframes susmodal-animation-fade {
    from {opacity: 0} 
    to {opacity: 1}
  }

  @keyframes susmodal-animation-fade {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  /* OPEN THE MODAL FROM TOP *********************/
  .susmodal-animation-top {
    animation-name: susmodal-animation-top;
  }
  
  @-webkit-keyframes susmodal-animation-top {
    from {bottom: -400px; opacity: 0} 
    to {bottom: 0; opacity: 1}
  }

  @keyframes susmodal-animation-top {
    from {bottom: -400px; opacity: 0}
    to {bottom: 0; opacity: 1}
  }
  
  /* OPEN THE MODAL FROM RIGHT *********************/
  .susmodal-animation-right {
    animation-name: susmodal-animation-right;
  }

  @-webkit-keyframes susmodal-animation-right {
    from {left: -400px; opacity: 0} 
    to {left: 0; opacity: 1}
  }

  @keyframes susmodal-animation-right {
    from {left: -400px; opacity: 0}
    to {left: 0; opacity: 1}
  }
  
  /* OPEN THE MODAL FROM BOTTOM  *********************/
  .susmodal-animation-bottom {
    animation-name: susmodal-animation-bottom;
  }

  @-webkit-keyframes susmodal-animation-bottom {
    from {top: -400px; opacity: 0} 
    to {top: 0; opacity: 1}
  }

  @keyframes susmodal-animation-bottom {
    from {top: -400px; opacity: 0}
    to {top: 0; opacity: 1}
  }
  
  /* OPEN THE MODAL FROM LEFT  *********************/
  .susmodal-animation-left {
    animation-name: susmodal-animation-left;
  }

  @-webkit-keyframes susmodal-animation-left {
    from {right: -400px; opacity: 0} 
    to {right: 0; opacity: 1}
  }

  @keyframes susmodal-animation-left {
    from {right: -400px; opacity: 0}
    to {right: 0; opacity: 1}
  }
  
  /* WHEN USER CLOSE THE MODAL *********************/
  .susmodal-content-reverse {
    animation-name: susmodal-animation-reverse;
  }
  
  /* Animation when user close modal */
  @-webkit-keyframes susmodal-animation-reverse {
    from {opacity: 1} 
    to {opacity: 0}
  }
  
  @keyframes susmodal-animation-reverse {
    from {opacity: 1}
    to {opacity: 0;}
  }