Added an example and styles

i-like-robots · i-like-robots · commit c0e6d3a9b6fc · 2012-04-13T17:41:27.000+01:00
diff --git a/css/example.css b/css/example.css
@@ -0,0 +1,45 @@
+/**
+ * Author:      Matt Hinchliffe <www.maketea.co.uk>
+ * Modified:    13/04/2012
+ * Description: Some crummy styles to lay out the example file
+ */
+
+body {
+	line-height:1.5;
+	font-family:Arial, sans-serif;
+	color:#111;
+	background:#eee;
+}
+
+h1 {
+	font-size:2em;
+	margin:0 0 .5em;
+}
+
+p {
+	margin:0 0 1.5em;
+}
+
+button {
+	font-size:1.5em;
+	line-height:1;
+	padding:.25em .5em;
+	border:none;
+	color:#fff;
+	background:#333;
+	border-radius:7px;
+	cursor:pointer;
+}
+	button:hover {
+		background-color:#111;
+	}
+
+#introduction {
+	width:25em;
+	margin:5em auto;
+	text-align:center;
+}
+
+#example {
+	display:none;
+}
diff --git a/css/modal.css b/css/modal.css
@@ -1,33 +1,37 @@
 /**
  * Author:      Matt Hinchliffe <www.maketea.co.uk>
- * Modified:    08/03/2012
- * Description: Simple modal window
+ * Modified:    10/04/2012
+ * Description: Simple jQuery modal window
  * Example:
  * <div id="modal-wrapper">
  *     <div id="modal-content" />
  *     <span id="modal-close" />
  * </div>
  * <div id="modal-overlay" />
  */
-@modalZindex: 300;
 
 .modal-overlay {
+	z-index:300;
 	background:rgba(0, 0, 0, 0.25);
-	z-index:@modalZindex;
 }
 
 .modal-wrapper {
+	z-index:310;
 	background:#fff;
-	z-index:@modalZindex + 10;
-	.box-shadow(3px, 3px, 0, rgba(0, 0, 0, 0.25));
+	border-radius:15px;
+	-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.25);
+	   -moz-box-shadow:0 0 15px rgba(0, 0, 0, 0.25);
+	        box-shadow:0 0 15px rgba(0, 0, 0, 0.25);
 }
 	.modal-content {
 		height:100%;
+		padding:2.5em 1em 1em;
 	}
 	.modal-close {
 		position:absolute;
-		top:10px;
-		right:10px;
+		top:.5em;
+		right:1em;
+		z-index:320;
+		font-size:.75em;
 		cursor:pointer;
-		z-index:@modalZindex + 20;
 	}
diff --git a/index.html b/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
+
+	<title>jQuery Modal</title>
+
+
+	<link rel="stylesheet" href="css/example.css" />
+	<link rel="stylesheet" href="css/modal.css" />
+
+	<!--
+	jQuery Modal by Matt Hinchliffe <http://www.maketea.co.uk>
+	Find out more at GitHub <http://github.com/i-like-robots/jQuery-Modal>
+	-->
+
+</head>
+<body>
+
+	<div id="introduction">
+		<h1>jQuery Modal</h1>
+		<p class="intro">
+			Every front-end developer needs their own <a href="http://github.com/i-like-robots/jQuery-Modal">modal
+			window</a>. The plugin is highly optimised and customisable.
+		</p>
+		<p>
+			<button class="js-open" rel="example">Open the modal</button>
+		</p>
+	</div>
+
+	<p id="example">
+		Rump sausage ham short loin pork. Pig venison boudin bresaola, frankfurter sirloin filet mignon pork shankle
+		capicola. Leberkas jerky ground round short loin bacon. Capicola strip steak flank meatball pork loin beef
+		ribs turducken, biltong jowl kielbasa rump shank short ribs. Beef beef ribs filet mignon frankfurter,
+		prosciutto pork chop chicken ground round short ribs tenderloin sirloin fatback brisket.
+	</p>
+
+	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
+	<script src="js/modal.js"></script>
+	<script>
+		$(function()
+		{
+			// Create a modal instance
+			window.modal = $('body').modal().data('modal');
+
+			// Bind click event
+			$(document).on('click', '.js-open', function()
+			{
+				modal.open( document.getElementById( this.getAttribute('rel') ).innerHTML );
+			});
+		});
+	</script>
+
+</body>
+</html>
diff --git a/js/modal.js b/js/modal.js
