maximmcnair · tlwillis22 · Feb 17, 2015 · Feb 17, 2015
diff --git a/lib/images/ui-icons_444444_256x240.png b/lib/images/ui-icons_444444_256x240.png
diff --git a/lib/images/ui-icons_555555_256x240.png b/lib/images/ui-icons_555555_256x240.png
diff --git a/lib/images/ui-icons_777620_256x240.png b/lib/images/ui-icons_777620_256x240.png
diff --git a/lib/images/ui-icons_777777_256x240.png b/lib/images/ui-icons_777777_256x240.png
diff --git a/lib/images/ui-icons_cc0000_256x240.png b/lib/images/ui-icons_cc0000_256x240.png
diff --git a/lib/images/ui-icons_ffffff_256x240.png b/lib/images/ui-icons_ffffff_256x240.png
diff --git a/lib/jquery-ui.min.css b/lib/jquery-ui.min.css
diff --git a/lib/jquery-ui.min.js b/lib/jquery-ui.min.js
diff --git a/modal/app.js b/modal/app.js
@@ -0,0 +1,37 @@
+$(function() {
+
+    //gets button and modal content by checking for comments (using regex) and then wraps them in divs.
+    //this was done so that elements could be identified without changing the HTML mark-up but it is far from ideal.
+    var html = $('body').html();
+        html = html.replace(/<!-- Modal Content Start -->([\s\S]*)<!-- Modal Content End -->/, "<div id='dialog'>$1</div>");
+        html = html.replace(/<!-- Modal Trigger -->([\s\S]*)<\/button>/, "<div id='dialog-button'>$1</div>");
+    $('body').html(html);
+
+    //uses the jQuery UI dialog plugin to set up the modal
+    var dialog = $('#dialog').dialog({
+        modal: true,
+        resizable: false,
+        draggable: false,
+        autoOpen: false,
+        dialogClass: 'reusable-modal',
+        open: function() {
+            $(".ui-widget-overlay").bind("click", function() {
+                $("#dialog").dialog("close");
+            });
+        },
+        show: {
+            effect: "fade",
+            duration: 100
+        },
+        hide: {
+            effect: "fade",
+            duration: 100
+        }
+    });
+
+    //event handler to open modal when button clicked
+    $("#dialog-button button").click(function() {
+        dialog.dialog("open");
+    });
+
+});
diff --git a/modal/index.html b/modal/index.html
@@ -7,7 +7,11 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../lib/normalize.css">
+    <link rel="stylesheet" href="../lib/jquery-ui.min.css">
     <link rel="stylesheet" href="main.css">
+    <script src="../lib/jquery-2.1.1.js"></script>
+    <script src="../lib/jquery-ui.min.js"></script>
+    <script src="app.js"></script>
   </head>
   <body>
     <!-- Modal Trigger -->
@@ -20,8 +24,5 @@ <h1>The Cassini Mission</h1>
     <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 -->
-
-    <script src="../lib/jquery-2.1.1.js"></script>
-    <script src="app.js"></script>
   </body>
 </html>
diff --git a/modal/main.css b/modal/main.css
@@ -0,0 +1,52 @@
+#dialog-button button {
+    text-transform: uppercase;
+    color: #000;
+    -webkit-appearance: none;
+    outline: none;
+    cursor: pointer;
+    font-size: 1.4rem;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    display: block;
+    padding: 14px;
+    font-weight: 800;
+    border: 1px solid #be9c0d;
+    background-color: #ffcc0f;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd211), color-stop(1, #ffb308));
+    background: -webkit-linear-gradient(top, #ffd211 0%, #ffb308 100%);
+    background: -moz-linear-gradient(top, #ffd211 0%, #ffb308 100%);
+    background: -o-linear-gradient(top, #ffd211 0%, #ffb308 100%);
+    background: -ms-linear-gradient(top, #ffd211 0%, #ffb308 100%);
+    background: linear-gradient(top, #ffd211 0%, #ffb308 100%);
+    text-align: center;
+    vertical-align: middle;
+    font-family: sans-serif;
+    border-radius: 3px;
+    box-sizing: border-box;
+}
+
+.reusable-modal {
+    height: 75vh !important;
+    width: 75vw !important;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow: visible !important;
+}
+
+.reusable-modal .ui-dialog-titlebar {
+    box-sizing: border-box;
+    height: 30px;
+}
+
+#dialog {
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    overflow-y: scroll;
+    height: calc(100% - 30px) !important;
+}
+
+#dialog img {
+    width: 100%;
+    height: auto;
+}