crelm-popup/popup-min.js

A small (<2kb), simple popup component with responsive design using the crelm library.

module.exports=popup;var cssLoaded,crelm=require("crelm"),zIndex=10;function popup(e,t,o){cssLoaded||init();var i=crelm({parent:document.body,clss:"c-blur",style:{zIndex:zIndex}}),r=crelm({parent:document.body,clss:"c-popup",children:e,style:{zIndex:zIndex},blur:i,maxWidth:o||300});return r.close=function(e){r.style.opacity="",i.style.opacity="",removeEventListener("resize",r.resize),setTimeout(function(){r.remove(),i.remove(),"function"==typeof e&&e()},600)},t&&(i.onclick=r.close),setTimeout(function(){r.style.opacity="1",i.style.opacity="1"},5),r.resize=function(){var e=r.maxWidth;innerWidth+40<e?(r.style.width=innerWidth-40+"px",r.style.left="20px"):(r.style.width=e+"px",r.style.left=(innerWidth-e)/2+"px")},r.setWidth=function(e){r.maxWidth=e,r.resize()},r.resize(),addEventListener("resize",r.resize),r}function init(){cssLoaded=!0,crelm({parent:document.head,tag:"style",html:".c-blur,.c-popup{opacity:0;position:fixed;box-sizing:border-box;transition:all 0.6s}.c-popup{border-radius:5px;height:auto;top:20px;max-height:calc(100% - 40px);box-shadow:0 0 4px #000;background-color:#c0c0c0;padding:4px;overflow:auto}.c-blur{top:0;height:100%;left:0;width:100%;background-color:rgba(0, 0, 0, 0.5);backdrop-filter: blur(4px)}"})}