jquery.modal-box/dist/jquery.modalBox.min.css

The light weight modal plugin with css3 animations for jQuery

body div.modal-box-scroll-bar{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}body.modal-box-open{overflow:hidden}div.modal-box{opacity:0;position:fixed;top:0;bottom:0;left:0;right:0;z-index:999;background-color:rgba(0,0,0,.4);overflow-x:hidden;overflow-y:auto;visibility:hidden;transition:visibility .3s linear .5s,opacity .3s linear;transition-delay:0s;display:flex;justify-content:center;align-items:center;padding:20px 0;-webkit-overflow-scrolling:touch}div.modal-box>.inner{background:#fbfbfb;color:#101010;padding:25px 35px;width:600px;height:auto;box-sizing:border-box;position:relative;visibility:hidden;margin-top:auto;margin-bottom:auto}div.modal-box>.inner a{color:#101010}div.modal-box>.inner button.close{display:block;position:absolute;font-size:22px;line-height:11px;right:10px;top:10px;opacity:.5;background:0 0;border:none}div.modal-box>.inner button.close.close:hover{opacity:1}div.modal-box>.inner.hide-modal-inner,div.modal-box>.inner.show-modal-inner{animation-duration:.5s;animation-fill-mode:both;visibility:visible}div.modal-box>.inner.show-modal-inner{animation-name:modalBoxIn}div.modal-box>.inner.hide-modal-inner{animation-name:modalBoxOut}div.modal-box.active{visibility:visible;opacity:1}@keyframes modalBoxIn{0%{opacity:0;transform:translate3d(0,-100%,0)}100%{opacity:1;transform:none}}@keyframes modalBoxOut{0%{opacity:1}100%{opacity:0;transform:translate3d(0,-100%,0)}}