maximmcnair · adam125 · Nov 8, 2014 · Nov 9, 2014
diff --git a/modal/app.js b/modal/app.js
@@ -0,0 +1,49 @@
+$(document).ready(function () {
+
+    //Modal popup
+	//Activate modal when button is pressed
+    $('.modal_trigger').click(function(){
+
+          //get the number (ID) of the modal window and store it in the name attribute of the trigger
+		  var modal_num = $(this).attr('name');
+
+          //call function to show the modal 
+		  show_modal(modal_num);
+
+    });
+
+	$('.close_modal').click(function(){  
+
+		//call function to close the modal by clicking anywhere on the overlay
+		close_modal();
+
+    });
+
+});
+
+function close_modal() {  
+
+	//hide the modal popup
+    $('.modal_popup').fadeOut(600);
+    //hide the overlay
+    $('#modal_overlay').fadeOut(600);  
+
+}  
+
+function show_modal(modal_num) {  
+
+    $('#modal_overlay').css({ 'display' : 'block', opacity : 0});  //set the modal overlay opacity to 0 so we can fade it into view next
+    $('.modal_popup').css({'display' : 'block', opacity : 0}); //set the modal popup opacity to 0 so we can fade it into view next
+
+	//fade in the overlay to 80% opacity
+    $('#modal_overlay').fadeTo(600, 0.8);
+	//fade in popup
+    $('.modal_popup').fadeTo(600, 1);
+
+    //show the modal window  
+    $('#'+modal_num).fadeIn(600);  
+
+}  
+
+
+
diff --git a/modal/index.html b/modal/index.html
@@ -10,16 +10,19 @@
     <link rel="stylesheet" href="main.css">
   </head>
   <body>
+  <section id="modal_overlay" class="close_modal"></section>
     <!-- Modal Trigger -->
-    <button>Read about The Cassini Mission</button>
+    <button class="modal_trigger">Read about The Cassini Mission</button>
 
-    <!-- Modal Content Start -->
-    <h1>The Cassini Mission</h1>
-    <img src="http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2013/07/cassini_s_pale_blue_dot/12960295-4-eng-GB/Cassini_s_Pale_Blue_Dot_highlight_std.jpg" alt="Pale blue dot">
-    <p>On June 30, 2004, the Cassini spacecraft entered orbit around Saturn to begin the first in-depth, up-close study of the ringed planet and its domain. As expected, the Saturn System has provided an incredible wealth of opportunities for exploration and discovery. With its initial four-year tour of the Saturn system complete as well as an initial two-year extended mission called the Cassini Equinox Mission, the spacecraft is conducting a second extended mission called the Cassini Solstice Mission.</p>
-    <p>"We're looking at a string of remarkable discoveries -- about Saturn's magnificent rings, its amazing moons, its dynamic magnetosphere and about Titan's surface and atmosphere," says Dr. Linda Spilker, Cassini project scientist. "Some of the mission highlights so far include discovering that Titan has Earth-like processes and that the small moon Enceladus has a hot-spot at its southern pole, jets on the surface that spew out ice crystals and evidence of liquid water beneath its surface."</p>
-    <a href="http://saturn.jpl.nasa.gov/">Read more about the mission</a>
-    <!-- Modal Content End -->
+	<section class="modal_popup">
+		<!-- Modal Content Start -->
+		<h1>The Cassini Mission</h1>
+		<img src="http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2013/07/cassini_s_pale_blue_dot/12960295-4-eng-GB/Cassini_s_Pale_Blue_Dot_highlight_std.jpg" alt="Pale blue dot">
+		<p>On June 30, 2004, the Cassini spacecraft entered orbit around Saturn to begin the first in-depth, up-close study of the ringed planet and its domain. As expected, the Saturn System has provided an incredible wealth of opportunities for exploration and discovery. With its initial four-year tour of the Saturn system complete as well as an initial two-year extended mission called the Cassini Equinox Mission, the spacecraft is conducting a second extended mission called the Cassini Solstice Mission.</p>
+		<p>"We're looking at a string of remarkable discoveries -- about Saturn's magnificent rings, its amazing moons, its dynamic magnetosphere and about Titan's surface and atmosphere," says Dr. Linda Spilker, Cassini project scientist. "Some of the mission highlights so far include discovering that Titan has Earth-like processes and that the small moon Enceladus has a hot-spot at its southern pole, jets on the surface that spew out ice crystals and evidence of liquid water beneath its surface."</p>
+		<a href="http://saturn.jpl.nasa.gov/">Read more about the mission</a>
+		<!-- Modal Content End -->
+	</section>
 
     <script src="../lib/jquery-2.1.1.js"></script>
     <script src="app.js"></script>

diff --git a/modal/main.css b/modal/main.css
@@ -0,0 +1,53 @@
+section.modal_popup {
+	display:none;
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+	bottom:0;
+	margin:auto;
+	width:40%;
+	min-width:600px;
+	height:615px;
+    background-color:#fff;
+    color:#7f7f7f;
+    padding:20px;
+    z-index:101;
+	font-size:13px;
+}
+
+section#modal_overlay{
+	display:none;
+    background:#000;
+	opacity:0.7;
+    position:fixed;
+    top:0px;
+    bottom:0px;
+    left:0px;
+    right:0px;
+    z-index:100;
+}
+button.modal_trigger {
+	position:absolute;
+	top:0;
+	left:0;
+	right:0;
+	bottom:0;
+	margin:auto;
+	height:60px;
+	font-family: Arial;
+	color: #ffffff;
+	font-size: 20px;
+	background: #95d575;
+	padding: 10px 20px 10px 20px;
+	text-decoration: none;
+	border:none;
+	-webkit-box-shadow: 0px 3px 0px 0px #57913b;
+	-moz-box-shadow:    0px 3px 0px 0px #57913b;
+	box-shadow:         0px 3px 0px 0px #57913b;
+}
+
+button.modal_trigger:hover {
+    background: #a0dc82;
+    text-decoration: none;
+}