Pop up modal with only html and CSS3

index.html

<!DOCTYPE html>
<html>
	<head>
		<link rel='stylesheet' type='text/css' href='modal.css'/>
		<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="confirm.js"></script>
	</head>
	<body>
		<a href="#css-only-modal">Open CSS3 Modal</a>
		<div id="css-only-modal">
			<div>
				<a href="#close" title="Close" id="close">X</a>
				<h2>CSS Only Modal Box</h2>
				<p>This is modal box is created solely on css3.</p>
				<form id="my-form" action="./">
					<label>How are you doing today?</label>
					<input id="mood" type="text"/>
					<button type="submit" value="submit">Submit</button>
				</form>
			</div>
		</div>
	</body>
</html>

modal.css

#css-only-modal
{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #eee;
	z-index: 99999999; /* make it to sit on top of all html elements */
	opacity:0; /* make it invisible */

	/* take 100ms if there is changes to opacity, for example if opacity changes from from 0 to 1 */
	-webkit-transition: opacity 100ms ease-in; /* for Chrome and Safari */
	-moz-transition: opacity 100ms ease-in; /* for FireFox */
	transition: opacity 100ms ease-in; /*for IE*/
	pointer-events: none; /*prevent all click, stare and cursor options on this element */
}

/* css :target pseudo selector, matches when the hash in the URL matches example.com/#css-only-dialog */
#css-only-modal:target {
	opacity:1; /* changes the opacity to 1 to make it visible when the url is example.com/#css-only-dialog */
	pointer-events: auto; /* restores the default functionality */
}
#css-only-modal > div {
	width: 500px;
	position: relative;
	margin: 10% auto;
	padding: 2px 10px 10px 10px;
	border-radius: 8px; /* make the corner round */
	background: #fff;
	background: -webkit-linear-gradient(#fff, #0515fa);/* Chrome and Safari, gradient from white color to blue */
	background: -moz-linear-gradient(#fff, #0515fa);/* FireFox gradient */
}
#close 
{
	background: #0515fa;
	color: #fff;
	text-decoration: none;
	text-align: center;
	width: 18px;
	height: 18px;
	position: absolute;
	right: -9px;
	top: -9px;
	border-radius: 9px;
}
#close:hover { background: #bd0f37; }

confirm.js, very little jquery for javascript confirm dialog

$(document).ready(function(){
	$('#my-form').submit(function() {
	   confirm($('#mood').val());
	});
});

demo

Search within Codexpedia

Custom Search

Search the entire web

Custom Search