Overlay Design

Popup script

var createOverlay = function(row,button){
	var o = $("<div></div>").addClass("overlayOuter").attr("id","overlay-"+row.replace(/\#/g,'').replace(/\,/g,'')).on('click',function(){o.hide();}).appendTo($("body"));
	var i = $("<div></div>").addClass("overlayInner").on('click',function(e){e.stopPropagation();}).prepend($(row)).appendTo(o);
	$("<div></div>").addClass("overlayClose").on('click',function(e){ o.hide(); $("body").removeClass("noScroll"); }).appendTo(i);
	$(button).attr("href","#overlay").on('click',function(e){e.preventDefault();$("body").addClass("noScroll");o.show();});
} 

Sass File

.noScroll {
	overflow: hidden;
}

.overlayOuter {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.74902);
	z-index: 999;
	cursor: pointer;
	margin: 0;
	display: none;
	overflow-y: scroll;

	.overlayInner {
		max-width: 990px;
		margin: 20px auto 0;
		display: block;
		cursor: default;
		background: #dddddd;
		border: 1px solid rgba(255,255,255,0.1);
		padding: 10px 40px 40px;
		position: relative;
		
		iframe {
	    	background: #dddddd;
	    	}

	    	.xRow:nth-child(1) .xModuleCallout {
	    	    	
	    		padding: 0;

		    	.xCopyContainer {
		    		position: relative;
		    		background: #ddd;
		    		color: @primaryColor;
		    		padding: 0;
	
		    		h1, h2 {
		    			color: @primaryColor;
		    		}
	
		    		h1 {
		    			.font-size(40);
		    		}
	
		    		h2,.xCopy.xContentBody {
		    			.font-size(20);
		    		}
		    	}
	
		    	.xCopy.xContentBody {
		    		margin-top: 5px;
		    		background: @primaryColor url(https://asset.engagesciences.com/images/2103/d916d7ef-147d-4c6d-8452-ca546ceb1b4a/nokia_small.png) no-repeat;
		    		background-position: right 10px center;
		    		color: white;
		    		padding: 5px 10px;
		    		height: 30px;
		    	}
	
		    }
	
		    .xRow:nth-child(2),
		    .xRow:nth-child(2) .xComponent {
		    	background: white;
		    	color: @primaryColor;
		    }
	
		   
	
		    .xVideo {
		    	background: #ddd;
		    	padding: 0;
	
		    	.xIconPlay {
		    		background: rgba(0,0,0,0.3);
		    		color: white;
		    	}
		    }
	
		    .thin, .thin .xImage {
		    	padding: 0;
		    }
	
	
		}

		.overlayClose {
			position: absolute;
			right: 10px;
			top: 15px;
		    	content: "X"
			width: 21px;
			height: 25px;	   
		 	cursor: pointer;
		}
}