jpopup/dist/css/index.min.css

Simple lightweight (<2kB) javascript popup modal plugin

.jPopup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;max-width:100%;padding:6rem;background:#fff;opacity:0}.jPopup--fade{pointer-events:none}.jPopup--slideInFromTop{transform:translateY(-100%)}.jPopup--slideInFromBottom{transform:translateY(100%)}.jPopup--slideInFromRight{transform:translateX(100%)}.jPopup--slideInFromLeft{transform:translateX(-100%)}.jPopup-closeBtn{position:absolute;right:1rem;top:1rem;width:5rem;height:5rem;outline:0;border:0;background-color:transparent;cursor:pointer}.jPopup-closeBtn:after,.jPopup-closeBtn:before{content:"";position:absolute;left:50%;top:50%;height:2.6rem;width:.3rem;background-color:#adadad}.jPopup-closeBtn:before{transform:translate(-50%,-50%) rotate(45deg)}.jPopup-closeBtn:after{transform:translate(-50%,-50%) rotate(-45deg)}.jPopup-content{top:50%;left:1.5rem;right:1.5rem;position:absolute;transform:translateY(-50%)}.jPopup--isOpen .jPopup,.jPopup--isOpen body{overflow:hidden}.jPopup--isOpen .jPopup{pointer-events:all}.jPopup--isOpen .jPopup--fade{animation:fade 350ms ease-in-out forwards}.jPopup--isOpen .jPopup--slideInFromTop{animation:slideInFromTop 350ms ease-in-out forwards}.jPopup--isOpen .jPopup--slideInFromBottom{animation:slideInFromBottom 350ms ease-in-out forwards}.jPopup--isOpen .jPopup--slideInFromLeft{animation:slideInFromLeft 350ms ease-in-out forwards}.jPopup--isOpen .jPopup--slideInFromRight{animation:slideInFromRight 350ms ease-in-out forwards}@keyframes fade{0%{opacity:0}100%{opacity:1}}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-100%)}100%{transform:translateY(0);opacity:1}}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}100%{transform:translateY(0);opacity:1}}@keyframes slideInFromRight{0%{opacity:0;transform:translateX(100%)}100%{transform:translateX(0);opacity:1}}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-100%)}100%{transform:translateX(0);opacity:1}}