JSFiddle - React, Tailwind, and code Playground

by sjmcpherson

HTML

<a href="http://www.smashdynamic.com" id="me">open</a>
Ultricies purus ac ipsum accumsan, nibh aenean quis pretium aliquam ut, sed in egestas turpis egestas a, non congue magna lacinia elit erat vel, repudiandae adipiscing sed massa consequat orci facilisi. Justo porta, montes sed non pellentesque congue, in eu maecenas litora posuere, nonummy asperiores gravida justo. Nibh erat venenatis, in non justo, convallis urna, faucibus ipsum, integer vestibulum adipiscing ultricies vestibulum. Curabitur nulla hendrerit dolore sed lorem, vestibulum vitae sed lectus elementum in eros. Metus blandit, consectetuer tellus est inceptos varius dui morbi, dolor vel diam in nullam. Sociis vehicula pellentesque vehicula adipiscing, natoque quis aptent, ut amet diam justo. Vestibulum luctus lacinia, tortor ullamcorper nisl a turpis, donec congue augue sed, scelerisque consectetuer sit arcu. Lorem fermentum mi dui neque, tincidunt id laoreet dis. Hendrerit sit vestibulum eu donec ut, imperdiet massa aliquam luctus amet quis congue. Lobortis arcu id et tortor et duis, lectus et aliquet, sapien at sed, etiam consequat condimentum interdum molestie, justo suscipit. Luctus iaculis quis natoque, velit dolor at malesuada, nunc gravida maecenas non tincidunt nec. Repellendus at, arcu vestibulum ut vitae ligula per, dolor id, eu vivamus temporibus ultrices habitasse pharetra nostra.Ultricies purus ac ipsum accumsan, nibh aenean quis pretium aliquam ut, sed in egestas turpis egestas a, non congue magna lacinia elit erat vel, repudiandae adipiscing sed massa consequat orci facilisi. Justo porta, montes sed non pellentesque congue, in eu maecenas litora posuere, nonummy asperiores gravida justo. Nibh erat venenatis, in non justo, convallis urna, faucibus ipsum, integer vestibulum adipiscing ultricies vestibulum. Curabitur nulla hendrerit dolore sed lorem, vestibulum vitae sed lectus elementum in eros. Metus blandit, consectetuer tellus est inceptos varius dui morbi, dolor vel diam in nullam....

CSS

html,body{height:100%;width:100%;margin:0;}
.modal-bg{visibility:hidden;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);  transition:all .4s ease;}
.modal{opacity:0;position: fixed;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);width:650px;height:300px;box-shadow:0 0 15px rgba(0,0,0,.5);margin:0 auto;transition:all .4s ease;background-color:#fff;}

.modal-close-btn{width:20px;height:20px;margin:.2em;background-color:#eee;cursor:pointer;position:absolute;right:0;top:0;}
.modal-fullscreen-btn{width:20px;height:20px;margin:.2em;background-color:#eee;cursor:pointer;position:absolute;right:2em;top:0;}
.modal-fullscreen:hover{background-color:#ccc;}

.modal-bg.modal-opened{display:block;visibility:visible;opacity:1;}
.modal-bg.modal-opened .modal{opacity:1;}

.modal-fullscreen.modal-bg{padding-top:40px;background-color:rgba(0,0,0,1);box-sizing:border-box;}
.modal-fullscreen .modal{width: 100%;height: 100%;}
iframe{width:100%;height:100%;border:0;}

JavaScript

(function(d){
    
        var iframe, modal, closeBtn, fullscreenBtn, container;    
  		d.getElementById("me").addEventListener('click', open, false);  
    
    	function init(){
			    container = document.createElement('div');
                container.className = "modal-bg";
            	closeBtn = document.createElement('div');
                closeBtn.className = "modal-close-btn";
            	fullscreenBtn = document.createElement('div');
                fullscreenBtn.className = "modal-fullscreen-btn";
                modal = document.createElement('div');
                modal.className = "modal";
                iframe = document.createElement('iframe');
            	
                modal.appendChild(iframe);
            	
                container.appendChild(modal);
            	container.appendChild(closeBtn);
            	container.appendChild(fullscreenBtn);
            
                document.body.appendChild(container); 
        }
    	init();
    
    	var href;
        function open(e){
            	var t = e.target;
            	container.classList.toggle('modal-opened');
            	
            	if(href !== t.getAttribute('href')){
                    href = t.getAttribute('href');
                    iframe.src = href;
                    iframe.addEventListener('load',function(){                             
                        //console.log(typeof iframe);
                        //console.log(iframe.contentWindow.document.body);

                    },false)
                }
                e.preventDefault();        
            	container.addEventListener('click', close, false);   	
            	fullscreenBtn.addEventListener('click', fullscreen, false);  
        }

 		function close(){        
               container.classList.toggle('modal-opened');
        }   
    
		function fullscreen(e){        
            e.stopPropagation();
             container.classList.toggle('modal-fullscreen');
            
            
 ...