Pop Up Box

For a pop up on a home page, add this code right below the MainContainer:

You will need to change the pcAction_10 and pcItem_10_1_1 to match the appropriate node and position in your config file.

 <cfif request.pcAction_10 EQ "Show Popup">
   <div id="popup">
      <div id="backdrop"></div>
      <div id="popupContainer">
         <div class="wrapper">
            <cfoutput>#pcItem_10_1_1#</cfoutput>
         </div>
         <div id="popupClose"><img src="/images/layouts/close.png"/></div>
      </div> 
   </div>
    <script>
      $("backdrop").on("click", function(event,element){
         $("popup").hide();
      });
      $("popupClose").on("click", function(event,element){
         $("popup").hide();
      });
    </script>
 </cfif>

CSS 

/* POPUP */
#backdrop{
	bottom:0;
	background:rgba(0,0,0,.7);
}

#backdrop,#popup{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#popup{
	z-index:3500;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-flow:column nowrap;
	    flex-flow:column;
	-ms-flex-pack:center;
	    justify-content:center;
}

	#popupContainer{
		position:relative;
		width:500px;
		max-width:94%;
		height:auto;
		background:rgba(255,255,255,.9);
		font-size:22px;
		line-height:1.5;
		color:#3d3d3d;
		margin:0 auto;
	}
	
		#popup .wrapper{
			padding:40px;
		}
		
	#popupClose{
		position:absolute;
		top:-15px;
		right:-15px;
	}
/* End POPUP */

Config File

<content name="Popup" action="Show Popup,Do Not Show Popup" count="1" pageoverride="0" xmloverride="">
     <item name="Message" type="blob_html" />
</content>