popin/demo/popin.css

Create your custom popin

.popin{top:-200%;z-index:102;width:90%;max-width:960px;background:#fff;box-shadow:0 3px 7px rgba(0,0,0,.25);-moz-box-shadow:0 3px 7px rgba(0,0,0,.25);-webkit-box-shadow:0 3px 7px rgba(0,0,0,.25);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.popin--open{position:fixed;top:50%;transform:translate(-50%,-50%);-moz-transition:top .4s ease-in-out;-webkit-transition:top .4s ease-in-out}.popin--open,.popin--openJs{left:50%;transition:top .4s ease-in-out}.popin--openJs{position:absolute;transform:translateX(-50%);-moz-transition:top .4s ease-in-out;-webkit-transition:top .4s ease-in-out}.popin--closeJs{top:-200%!important}.popin-header{background:#000;padding:10px;text-align:right}.popin-header-linkClose{color:#fff;text-decoration:none}.popin-overlay{position:fixed;top:0;left:0;width:0;height:0;z-index:100;background-color:#000;background:rgba(0,0,0,.7);opacity:0;transition:opacity .4s ease-in-out;-moz-transition:opacity .4s ease-in-out;-webkit-transition:opacity .4s ease-in-out}.popin-overlay--visible{opacity:1;width:100%;height:100%}