To create a 'modal pop-up' feature, you have the option of using Javascript or 'pure CSS'. Using pure CSS allows it to function even when Javascript is disabled. Check out this demonstration of a Modal Pop-Up implemented solely with CSS3/HTML5 (no Javascript involved):
An important element of this implementation involves utilizing the target
attribute, as demonstrated in the code snippet below:
/*** pop-up div to cover entire area ***/
.divModalDialog {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*! important !*/
display:none;
/* last attribute set darkness on scale: 0...1.0 */
background-color:rgba(0,0,0,0.8);
text-align:center;
z-index:101;
}
/*** ! target attribute does the job ! ***/
.divModalDialog:target { display:block; }
For a detailed explanation and the complete solution, you can refer to my article (http://www.codeproject.com/Tips/170049/Pure-HTML-5-CSS-3-Modal-Dialog-Box-no-JavaScript).