Modal Popup

Modal Popups for any HTML content. Example of an iFrame:

LINK
Loading
<style>[aria-role=button],button{cursor:pointer}[aria-role=button][data-modal][aria-controls],button[data-modal][aria-controls]{transition:all .3s ease-out}[aria-role=button][data-modal][aria-controls]:focus,[aria-role=button][data-modal][aria-controls]:hover,button[data-modal][aria-controls]:focus,button[data-modal][aria-controls]:hover{-webkit-filter:contrast(120%);filter:contrast(120%);box-shadow:0 0 0 4px rgba(255,0,0,.6);outline:0 solid}.lnk_modal-open{font-size:larger;padding:.25rem .5rem;display:inline-block;text-decoration:none;border:0 solid;margin:0 auto}.lnk_modal-img{padding:0}.lnk_modal-open:active{-webkit-filter:brightness(85%);filter:brightness(85%)}.img_modal-open{display:block;border:0 solid}.modal{max-width:80vw;max-height:90vh;background-color:#f7f0e8;margin:0 auto;position:absolute;left:10%;right:10%;top:5%;bottom:5%;z-index:99999999;border:1px solid #000;box-shadow:0 .25em .5em #000;transition:opacity .5s ease-out,visibility 0s ease-out 1s,transform .5s ease-out .5s;backface-visibility:hidden;opacity:0;visibility:hidden;transform:scale(.8) translate3d(0,0,0);pointer-events:none}.modal[aria-hidden=false]{position:fixed;transition-delay:0s,0s,0s;opacity:1;visibility:visible;transform:scale(1) translate3d(0,0,0);pointer-events:auto}.modal_lightbox{text-indent:-200em;background-color:rgba(0,0,0,.8);width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;z-index:5;cursor:pointer;transition:opacity .5s ease-out,visibility 0s ease-out .5s;opacity:0;visibility:hidden;pointer-events:none}.modal_lightbox-on{transition-delay:0s,0s;opacity:1;visibility:visible;pointer-events:auto}.modal_lightbox-on:hover{cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAANpJREFUOBGNkz0KAjEQhYPYWXgCKws7LcXWyt7WG4i9jegBvIJ4AvEyXsRCsBDiN0sGkiE/O/A2O9n3viS7rPPeb9ETrVzPwrtHDzR1XF5I6oPWLQaeq5hDXQRw0I6xCuF5HH7Tz7oFuTkhrSyEhza8THaLoQhphpWUg/QOFyA/AFpy5nTbGrIjxvg4AiiGBzYc+rGZH9KPzFy+ZbX4bX9l+VDZr5NQMMbhbtvMxccpQ3JhpTchtXATQviItIpvW0CY7HHm8c9UDRd2chbABt3RQk2tEe8O3dDkD4JQ4iOR7BMpAAAAAElFTkSuQmCC"),pointer}.modal_desc,.modal_title{position:absolute;top:5px;left:-200em;background-color:#fff;color:#000;text-shadow:0 0 0 #fff;font-size:20px;padding:.125em .25em;margin:0}.modal_desc:focus,.modal_title:focus{left:5px}[aria-hidden=false] .modal_title{transition:opacity .5s ease-out 3s;opacity:0}.modal_title,.modal_title:focus{opacity:1;transition:opacity .5s ease-out}.modal_iframe{transition:opacity .5s ease-out,visibility 0s ease-out 1s;opacity:0;visibility:hidden;pointer-events:none}.modal_iframe-on{transition:opacity .8s ease-out,visibility 0s ease-out 0s;opacity:1;visibility:visible;pointer-events:auto}[aria-hidden=true] .modal_iframe{display:none}[aria-hidden=false] .modal_iframe{display:block}.modal_lnk-close{cursor:pointer;position:absolute;top:-20px;right:-20px;border:0 solid;border-radius:50%;width:40px;height:40px;background-color:red;box-shadow:0 .25em .5em rgba(0,0,0,.25);overflow:hidden;transition:background-color .3s ease-out}.modal_lnk-close:active,.modal_lnk-close:focus,.modal_lnk-close:hover{background-color:#c00;outline:0 solid}.svg-close{pointer-events:none;width:40px;height:40px;stroke:#fff;stroke-width:2}[class*=svg-loading]{position:absolute;width:80px;height:80px;top:calc(50% - 40px);left:calc(50% - 40px);z-index:-1;transition:opacity .3s ease-out;backface-visibility:hidden}.svg-loading{fill:#00539f;-webkit-animation:rotate 4s linear 0s infinite;animation:rotate 4s linear 0s infinite}.svg-loading2{fill:#F7F0E8;-webkit-animation:rotate 5s linear 1s infinite;animation:rotate 5s linear 1s infinite}@-webkit-keyframes rotate{to{-webkit-transform:rotate(360deg) translate3d(0,0,0);transform:rotate(360deg) translate3d(0,0,0)}}@keyframes rotate{to{-webkit-transform:rotate(360deg) translate3d(0,0,0);transform:rotate(360deg) translate3d(0,0,0)}}body.-modal-open{overflow:hidden}.-modal[aria-hidden=true]{-webkit-filter:blur(4px);filter:blur(4px)}.-modal.-modal-open{-webkit-filter:blur(4px);filter:blur(4px)}.u-margin2{margin:2rem 0}</style>
<main class=-modal>
    
<a class="lnk_modal-open" href="https://ghost-o-matic.com/" data-modal>LINK</a>
    
</main>
<svg style="display:none" viewBox="Infinity Infinity -Infinity -Infinity">   <defs><symbol viewBox="0 0 38 38" id="icon-cross"><path d="M19 17.6l5.3-5.4 1.4 1.4-5.3 5.4 5.3 5.3-1.4 1.4-5.3-5.3-5.3 5.3-1.4-1.4 5.2-5.3-5.2-5.3 1.4-1.4 5.3 5.3z"></path></symbol><symbol viewBox="0 0 150 130" id="icon-loading"><title>Loading</title><path d="M81.5 33l30.8-32.8c0.3-0.3 0.5-0.2 0.3 0.3 -1.8 5.2-1.7 15.3-1.7 15.3 -0.1 6.8-0.8 11.7-6.6 17.9L74.8 65.1c-0.2 0.2-0.4 0-0.3-0.2 1.5-5.1 1.2-15.1 1.2-15.1C75.4 45.6 76.4 38.4 81.5 33M105.9 54.8l43.8 10.3c0.4 0.1 0.4 0.4-0.2 0.4 -5.4 1-14.1 6.1-14.1 6.1 -6 3.3-10.5 5.2-18.8 3.2l-41.9-9.9c-0.3-0.1-0.2-0.3 0-0.4 5.2-1.3 13.7-6.5 13.7-6.5C92 55.9 98.7 53.1 105.9 54.8M99.4 86.3l13 43.2c0.1 0.4-0.1 0.5-0.4 0.1 -3.6-4.2-12.4-9.2-12.4-9.2 -5.8-3.5-9.7-6.5-12.2-14.6L75 64.5c-0.1-0.3 0.2-0.4 0.3-0.2 3.7 3.9 12.5 8.6 12.5 8.6C91.5 74.8 97.3 79.2 99.4 86.3M68.7 97l-30.8 32.8c-0.3 0.3-0.5 0.2-0.3-0.3 1.8-5.2 1.7-15.3 1.7-15.3 0.1-6.8 0.8-11.7 6.6-17.9l29.5-31.4c0.2-0.2 0.4 0 0.3 0.2 -1.5 5.1-1.2 15.1-1.2 15.1C74.8 84.4 73.8 91.6 68.7 97M44.1 75.8L0.3 65.4C-0.1 65.3-0.1 65 0.5 65c5.4-1 14.1-6.1 14.1-6.1 6-3.3 10.5-5.2 18.8-3.2l41.9 9.9c0.3 0.1 0.2 0.3 0 0.4 -5.2 1.3-13.7 6.5-13.7 6.5C58.1 74.7 51.3 77.5 44.1 75.8M50.2 43.8l-13-43.2c-0.1-0.4 0.1-0.5 0.4-0.1C41.2 4.7 50 9.7 50 9.7c5.8 3.5 9.7 6.5 12.2 14.6l12.4 41.3c0.1 0.3-0.2 0.4-0.3 0.2 -3.7-3.9-12.5-8.6-12.5-8.6C58.1 55.4 52.4 50.9 50.2 43.8"></path></symbol></defs></svg>
    
<script>var debounce=function(e,t,n){var a;return function(){var i=this,r=arguments,o=n&&!a;clearTimeout(a),a=setTimeout(function(){a=null,n||e.apply(i,r)},t||200),o&&e.apply(i,r)}};!function(e,t,n){"use strict";var a="modal",i="lightbox",r="-"+a+"-open",o=function(e){for(var n=t.getElementsByClassName("-"+a),i=n.length;i--;)e?(n[i].classList.add(r),"body"!==n[i].tagName.toLowerCase&&n[i].setAttribute("aria-hidden","true")):(n[i].classList.remove(r),n[i].removeAttribute("aria-hidden"));return!!e},l=function(e){var n,l=e.target.count,d=t.getElementById(a+"_"+l),s=t.getElementById(a+"_"+l+"_"+i);d&&(d.setAttribute("aria-hidden","true"),s.className=s.className.replace(i+"-on",""),o(!d.getAttribute("aria-hidden")),n=t.getElementById(d.returnId),t.body.classList.remove(r),n.focus())},d=function(e){var t=e.cloneNode(!0),n={};return t.className=a,t.setAttribute("style","position:fixed;visibility:hidden;transform: none"),e.parentElement.appendChild(t),n.width=t.clientWidth,n.height=t.clientHeight,e.parentElement.removeChild(t),n},s=function(){for(var e,n,i,r=t.getElementsByClassName(a),o=r.length;o--;)for(e=d(r[o]),i=(n=r[o].getElementsByClassName(a+"_iframe")).length;i--;)n[i].width=e.width,n[i].height=e.height},c=function(e){var t=e;return"body"!==e.tagName.toLowerCase()&&(e.modalSrc||(t=c(e.parentElement)),t)},u=function(e){e.preventDefault();var n=c(e.target);if(n){var l=n.count,s=a+"_"+l,u=a+"_"+i,m=t.getElementById(s),h=t.getElementById(s+"_"+i);m&&h&&(h.className.match(u+"-on")||(h.className+=" "+u+"-on"),m.setAttribute("aria-hidden","false"),function(e){var n,i,r;e.getElementsByClassName(a+"_iframe")[0]||((r=t.createElement("iframe")).addEventListener("load",function(){r.classList.add(a+"_iframe-on")},!1),r.src=e.modalSrc,r.className=a+"_iframe",n=d(e),r.width=n.width,r.height=n.height,r.setAttribute("frameborder",0),r.setAttribute("allowfullscreen",!0),i=t.getElementById(a+"_"+e.count+"_lnk_close"),e.insertBefore(r,i))}(m),o(!!m.getAttribute("aria-hidden")),t.body.classList.add(r),t.getElementById(a+"_"+l+"_title").focus())}},m=function(e){13!==e.which&&32!==e.which||(e.preventDefault(),u(e))},h=function(e){e.id=e.id||"modal_"+e.count+"_lnk",e.setAttribute("aria-controls",a+"_"+e.count);var t=e.tagName.toLowerCase();"button"!==t&&(e.setAttribute("aria-role","button"),e.addEventListener("keydown",m,!1)),e.tabIndex=0,e.addEventListener("click",u,!1)},g=function(e){var n=e.target;27===e.which&&l(e),9===e.which&&e.shiftKey&&n.classList.contains(a+"_title")&&(e.preventDefault(),t.getElementById(a+"_"+e.target.count+"_lnk_close").focus()),9!==e.which||e.shiftKey||n.classList.contains(a+"_lnk-close")&&(e.preventDefault(),t.getElementById(a+"_"+e.target.count+"_title").focus()),13!==e.which&&32!==e.which||n.classList.contains(a+"_lnk-close")&&(e.preventDefault(),l(e))},f=function(e,n,a){var i=t.createElementNS("http://www.w3.org/2000/svg","svg");if(i.classList.add(n),a){var r=t.createElementNS("http://www.w3.org/2000/svg","title");r.textContent=a,i.appendChild(r)}var o=t.createElementNS("http://www.w3.org/2000/svg","use");return o.setAttributeNS("http://www.w3.org/1999/xlink","href","#"+e),i.appendChild(o),i},v=function(e){var n=t.createElement("section");n.id=a+"_"+e.count,n.count=e.count,n.returnId=e.id,n.className=a,n.setAttribute("aria-hidden","true"),n.setAttribute("aria-labelledby",a+"_"+e.count+"_title"),n.setAttribute("aria-describedby",a+"_"+e.count+"_desc"),n.setAttribute("role","dialog"),n.modalSrc=e.modalSrc,n.appendChild(function(e){var n=t.createElement("h1");return n.id=a+"_"+e.count+"_title",n.className=a+"_title",n.tabIndex=0,n.textContent=function(e){var t="",n=e.getElementsByTagName("img");return n&&n[0]&&(t=n[0].alt),e.getAttribute("data-modalTitle")||t||e.textContent}(e),n.count=e.count,n.addEventListener("keydown",g,!1),n}(e)),n.appendChild(f("icon-loading","svg-loading","Loading")),n.appendChild(f("icon-loading","svg-loading2","")),n.appendChild(function(e){var n=t.createElement("p");return n.id=a+"_"+e.count+"_desc",n.className=a+"_desc",n.tabIndex=0,n.innerHTML=e.getAttribute("data-modalDesc")||"Tab or Shift + Tab to move focus.",n.count=e.count,n.addEventListener("keydown",g,!1),n}(e)),n.appendChild(function(e){var n=t.createElement("a");return n.id=a+"_"+e.count+"_lnk_close",n.className=a+"_lnk-close",n.tabIndex=0,n.appendChild(f("icon-cross","svg-close","Close modal")),n.count=e.count,n.addEventListener("click",l,!1),n.addEventListener("keydown",g,!1),n}(e)),t.body.appendChild(n)};!function(o){var d;!function(e){a=e.modalName||a,i=e.lightboxClass||i,r=e.openClass?"-"+a+e.openClass:r}(o);var c,u,m,g=t.querySelectorAll("[data-"+a+"]");if(g){for(var f=g.length;f--;)d=!1,g[f].hasAttribute("href")&&(d=g[f].href),g[f].getAttribute("data-modal").length&&(d=g[f].getAttribute("data-modal")),d&&(g[f].modalSrc=d,g[f].count=f,h(g[f]),v(g[f]),c=g[f],m=void 0,u=c.count,(m=t.createElement("div")).id=a+"_"+u+"_"+i,m.className=a+"_"+i,m.count=u,m.returnId=c.id,m.addEventListener("click",l,!1),t.body.appendChild(m));e.addEventListener("resize",n(s,250,!1))}}({modalName:"modal",openClass:"-open",lightboxClass:"lightbox"})}(window,document,debounce);</script>