Added css3-modal, a new version of TK standard modals using CSS3 drop…

… shadows.
theknotfe · Jun 25, 2010 · b356fe2 · b356fe2
1 parent ff80a24
commit b356fe2
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 0 deletions.
diff --git a/css3-modal/demo.html b/css3-modal/demo.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+
+<html lang="en-us" class="no-js">
+
+<head>
+
+	<meta charset="utf-8" />
+	<!--[if !IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->
+
+	<title>Yet another HTML5 template, with jQuery</title>
+
+	<!--Modernizr should be the only script in the head-->
+	<script src="http://media.theknot.com/jscripts/shared/modernizr-1.5.min.js"></script>
+
+	<link rel="stylesheet" href="modal.css" />
+
+</head>
+
+<!--[if lte IE 6 ]><body class="ie ie6"><![endif]--> 
+<!--[if IE 7 ]><body class="ie ie7"><![endif]--> 
+<!--[if IE 8 ]><body class="ie ie8"><![endif]--> 
+<!--[if !IE]>--><body><!--<![endif]-->
+
+	<div class="wrap">
+		<div class="modal show" id="modalWindow">
+			<div class="ie-shadow">
+				<div class="shadow">
+					<h1>This is a modal header</h1>
+
+					<p>This is some modal text.</p>
+					<div class="closeContainer"><span class="close">x</span></div>
+
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<script src="http://media.theknot.com/jscripts/jquery/jquery-1.4.2.min.js"></script>
+</body>
+</html>
diff --git a/css3-modal/modal.css b/css3-modal/modal.css
@@ -0,0 +1,70 @@
+.modal{
+  background-color:rgba(0,0,0,.15);
+  height:0;
+  margin-left:-100px;
+  opacity:0;
+  overflow:hidden;
+  position:fixed;
+  top:200px;left:50%;
+  width:300px;
+  z-index:15;
+}
+  .modal .shadow{
+  	background-color:#fff;
+    border:2px solid #999;
+    box-shadow:0 0 15px rgba(0,0,0,.5);
+    margin:15px;
+    padding:20px 10px 10px;
+    -moz-box-shadow:0 0 15px rgba(0,0,0,.5);
+    -webkit-box-shadow:0 0 15px rgba(0,0,0,.5);
+		box-shadow:0 0 15px rgba(0,0,0,.5);
+    position:relative;
+  }
+		/*IE8 shadow uses MS blur filter*/
+		.ie8 .ie-shadow{
+			background: #000;
+			display:block;
+			filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='30', MakeShadow='true', ShadowOpacity='0.5');
+			margin:-15px 45px 45px -15px;
+		}
+			.ie8 .ie-shadow .shadow{
+				margin:0;
+				top:30px;left:30px;
+			}
+		/*IE7 and below use a large border*/
+		.ie7 .ie-shadow,
+		.ie6 .ie-shadow{border:15px solid #eee;}
+			.ie7 .shadow,
+			.ie6 .shadow{margin:0;}
+  .modal p{font-size:16px;}
+	/*TK modal specifics*/
+	#modalWindow.tk p{font:normal 16px Arial,sans-serif;}
+  #modalWindow.tk a{text-decoration:underline !important;}
+		#modalWindow.tk .close a{text-decoration:none !important;}
+	/*WC modal specifics*/
+  #modalWindow.wc a:hover{color:#8771A0;}
+  .show{
+  	display:block !important;
+  	height:auto !important;
+    opacity:1 !important;
+  }
+  .modal h1{margin:0 0 1em;}
+  .closeContainer{
+    background-color:#e2e2e2;
+    color:#777;
+  	font:bold 15px sans-serif;
+  	line-height:10px;
+	padding:1px 0 4px;
+  	position:absolute;
+  	text-align:right;
+  	top:0;left:0;
+  	width:100%;
+  }
+    .closeContainer .close{
+			margin-right:3px;
+			cursor:pointer;
+  	}
+  	.closeContainer .close a{color:#777 !important;text-decoration:none !important;}
+	.modal span{display:none;}
+		.modal span.show{display:block;}
+		.modal .closeContainer span{display:inline;}