modalbox.min.js

class ModalBox{constructor(t){if(this.options=t,"object"!=typeof this.options)throw new Error("options is not defined as an Object");if(void 0===this.options.width)this.width="40%";else if("number"==typeof this.options.width)this.width=this.options.width+"px";else{if("string"!=typeof this.options.width)throw new Error("Width must be a Number or String");if("px"!==this.options.width.slice(-2)&&"%"!==this.options.width.slice(-1)&&"vw"!==this.options.width.slice(-2))throw new Error("Width is not the correct unit. Choose between px, % or vw");this.width=this.options.width}if(void 0===this.options.height)this.height="auto";else if("number"==typeof this.options.height)this.height=this.options.height+"px";else{if("string"!=typeof this.options.height)throw new Error("Height must be a Number or String");if("px"!==this.options.height.slice(-2)&&"%"!==this.options.height.slice(-1)&&"vw"!==this.options.height.slice(-2)&&"vh"!==this.options.height.slice(-2))throw new Error("Height is not the correct unit. Choose between px, % or vw");this.height=this.options.height}if(void 0===this.options.maxWidth)this.maxWidth="500px";else if("number"==typeof this.options.maxWidth)this.maxWidth=this.options.maxWidth+"px";else{if("string"!=typeof this.options.maxWidth)throw new Error("maxWidth must be a Number or String");if("px"!==this.options.maxWidth.slice(-2)&&"%"!==this.options.maxWidth.slice(-1)&&"vw"!==this.options.maxWidth.slice(-2))throw new Error("maxWidth is not the correct unit. Choose between px, % or vw");this.maxWidth=this.options.maxWidth}if(void 0===this.options.maxHeight)this.maxHeight="100vh";else if("number"==typeof this.options.maxHeight)this.maxHeight=this.options.maxHeight+"px";else{if("string"!=typeof this.options.maxHeight)throw new Error("maxHeight must be a Number or String");if("px"!==this.options.maxHeight.slice(-2)&&"%"!==this.options.maxHeight.slice(-1)&&"vw"!==this.options.maxHeight.slice(-2))throw new Error("maxHeight is not the correct unit. Choose between px, % or vw");this.maxHeight=this.options.maxHeight}if(void 0===this.options.minWidth)this.minWidth="350px";else if("number"==typeof this.options.minWidth)this.minWidth=this.options.minWidth+"px";else{if("string"!=typeof this.options.minWidth)throw new Error("minWidth must be a Number or String");if("px"!==this.options.minWidth.slice(-2)&&"%"!==this.options.minWidth.slice(-1)&&"vw"!==this.options.minWidth.slice(-2))throw new Error("minWidth is not the correct unit. Choose between px, % or vw");this.minWidth=this.options.minWidth}if(void 0===this.options.minHeight)this.minHeight="auto";else if("number"==typeof this.options.minHeight)this.minHeight=this.options.minHeight+"px";else{if("string"!=typeof this.options.minHeight)throw new Error("minHeight must be a Number or String");if("px"!==this.options.minHeight.slice(-2)&&"%"!==this.options.minHeight.slice(-1)&&"vw"!==this.options.minHeight.slice(-2))throw new Error("minHeight is not the correct unit. Choose between px, % or vw");this.minHeight=this.options.minHeight}if(void 0===this.options.padding)this.padding="30px";else if("number"==typeof this.options.padding)this.padding=this.options.padding+"px";else{if("string"!=typeof this.options.padding)throw new Error("Height must be a Number or String");if("px"!==this.options.padding.slice(-2)&&"%"!==this.options.padding.slice(-1)&&"vw"!==this.options.padding.slice(-2))throw new Error("Height is not the correct unit. Choose between px, % or vw");this.padding=this.options.padding}if(void 0===this.options.template)throw new Error("Template is undefined");if("string"!=typeof this.options.template)throw new Error("Template is required a String");if(this.modal=document.createElement("div"),this.modal.classList.add("mb-modal"),this.modalBg=document.createElement("div"),this.modalBg.classList.add("mb-modalBg"),this.close=document.createElement("div"),this.close.classList.add("mb-close"),this.modal.innerHTML=this.options.template,this.options.animation)switch(this.options.animation){case"fade":this.modal.style.opacity="0",this.modalBg.style.opacity="0",this.modal.style.transform="translate(-50%, -50%)",this.modal.style.transition="opacity .3s ease-out",this.modalBg.style.transition="opacity .3s ease-out";break;case"slide":this.modal.style.opacity="0",this.modalBg.style.opacity="0",this.modal.style.transform="translate(-50%, -25%)",this.modal.style.transition="opacity .3s ease-out, transform .3s ease-out",this.modalBg.style.transition="opacity .3s ease-out";break;default:throw new Error("Animation does not exist, choose between fade or slide")}else this.modal.style.transform="translate(-50%, -50%)";this.modalBg.style.position="fixed",this.modalBg.style.display="none",this.modalBg.style.top="0",this.modalBg.style.left="0",this.modalBg.style.right="0",this.modalBg.style.bottom="0",this.modalBg.style.width="100vw",this.modalBg.style.height="100vh",this.modalBg.style.maxWidth="100%",this.modalBg.style.zIndex="9999",this.modalBg.style.backgroundColor="rgba(0,0,0,0.6)",this.modalBg.addEventListener("click",t=>{t.target===this.modalBg&&this.closeModal()}),this.close.innerHTML="×",this.close.style.color="rgba(0,0,0,0.7)",this.close.style.fontSize="33px",this.close.style.position="absolute",this.close.style.top="5px",this.close.style.right="12px",this.close.style.cursor="pointer",this.close.addEventListener("click",()=>{this.closeModal()}),this.modal.style.position="absolute",this.modal.style.display="none",this.modal.style.width=this.width,this.modal.style.height=this.height,this.modal.style.maxWidth=this.maxWidth,this.modal.style.maxHeight=this.maxHeight,this.modal.style.minWidth=this.minWidth,this.modal.style.minHeight=this.minHeight,this.modal.style.padding=this.padding,this.modal.style.top="50%",this.modal.style.left="50%",this.modal.style.backgroundColor="#fff",this.modal.style.borderRadius="4px",this.modalBg.appendChild(this.modal),this.modal.appendChild(this.close),document.body.appendChild(this.modalBg)}openModal(){this.modalBg.style.display="block",this.modal.style.display="block",this.options.animation?setTimeout(()=>{this.modal.style.transform="translate(-50%, -50%)",this.modal.style.opacity="1",this.modalBg.style.opacity="1"},50):(this.modal.style.opacity="1",this.modalBg.style.opacity="1")}closeModal(){this.modal.style.opacity="0",this.modalBg.style.opacity="0",setTimeout(()=>{this.modalBg.style.display="none",this.modal.style.display="none"},350),"slide"===this.options.animation&&(this.modal.style.transform="translate(-50%, -75%)",setTimeout(()=>{this.modal.style.transform="translate(-50%, -25%)"},350))}}