Creating a modal window with HTML5 & CSS3

Modal boxes are a frequently utilized tool in the web developer’s arsenal. Used for, amongst many things, login/register forms; advertisements; or just notifications to the user. However despite the fact that modal windows frequently contain mission critical information, they are routinely created with JavaScript, which does not sit well with the best-practices of progressive enhancement or graceful degration. This doesn’t need to be a problem, because HTML5 & CSS3 allow us to create modal windows with ease. What we are going to do is use CSS3’s transition, opacity, pointer-event, and background gradient properties to create a very beautiful and functional modal box.
CSS • HTML • Lotus Formula

Converted to Lotus Formula do it can be dynamically pasted in one or multiple fields.

tmpLINKclass := "slink";

tmpLINKtext := "test";

tmpCONTENT := 	"<h2>Modal Box ("+tmpLINKtext+")</h2>"+
							"<p>This is a sample modal box that can be created using the powers of CSS3.</p>"+
							"<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>";


REM {------------------------------------------------------------------------------------- STATIC CONTENT -----------------------------------------------------------------------------------------------------------};
"<a href=\"#"+@ThisName+"\""+@If(tmpLINKclass="";"";" class=\""+tmpLINKclass+"\"")+">"+tmpLINKtext+"</a>"+
"<div id=\""+@ThisName+"\" class=\""+@ThisName+"Dialog\">"+
	"<div><a href=\"#"+@ThisName+"close\" title=\"Close\" class=\""+@ThisName+"close\">X</a>"+ tmpCONTENT + "</div>"+
"</div>"+
"<style>"+
	"div."+@ThisName+"Dialog {"+
		"position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.70);z-index:99999;opacity:0;"+
		"-webkit-transition:opacity 300ms ease-in;-moz-transition:opacity 300ms ease-in;transition:opacity 300ms ease-in;pointer-events:none;}"+
	"div."+@ThisName+"Dialog:target {opacity:1;pointer-events:auto;}"+
	"div."+@ThisName+"Dialog > div {"+"width:400px;position:relative;margin:10% auto;padding:5px 20px 13px 20px;border-radius:10px;"+
		"background:#FFFFFF;background:-moz-linear-gradient(#fff, #999);background:-webkit-linear-gradient(#fff, #999);background:-o-linear-gradient(#fff,#999);}"+
	"a."+@ThisName+"close { "+
		"background: #606061;color: #FFFFFF;position: absolute;right: -12px; top: -10px; width: 24px;"+
		"line-height: 25px; font-weight: bold; text-decoration: none; text-align: center;"+
		"-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"+
		"-moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; }"+
	"a."+@ThisName+"close:hover { background: #D92029; }"+
"</style>";
REM {---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------};

Written by Frank Brefere, but adapted from Keenan Payne • Posted Oct. 02, 2012
http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

Posted by fbrefere001 on Tuesday March 14, 2017