From 3eda14c13be780c581fcd81243acc50f745c60d0 Mon Sep 17 00:00:00 2001 From: Adam Date: Sat, 8 Nov 2014 13:37:33 +0000 Subject: [PATCH 1/2] Modal Popup Implementation --- modal/app.js | 19 +++++++++++++++ modal/index.html | 20 +++++++++------ modal/main.css | 63 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 8 deletions(-) diff --git a/modal/app.js b/modal/app.js index e69de29..9e3151d 100644 --- a/modal/app.js +++ b/modal/app.js @@ -0,0 +1,19 @@ +$(document).ready(function () { + + + //Modal popup + //Activate modal when button is pressed + $('#modal_trigger').click(function(){ + $('#modal_overlay').fadeIn('fast',function(){ + $('#modal_popup').css('display', 'block'); //Overwrite CSS rule to display the modal + }); + }); + + //Close modal when button is pressed + $('#boxclose').click(function(){ + $('#modal_popup').css('display', 'none'); //Overwrite CSS rule to close the modal + $('#modal_overlay').fadeOut('fast'); + + }); + +}); \ No newline at end of file diff --git a/modal/index.html b/modal/index.html index 3f5a285..5d30e24 100644 --- a/modal/index.html +++ b/modal/index.html @@ -10,16 +10,20 @@ + - + - -

The Cassini Mission

- Pale blue dot -

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.

-

"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."

- Read more about the mission - + diff --git a/modal/main.css b/modal/main.css index e69de29..e21e353 100644 --- a/modal/main.css +++ b/modal/main.css @@ -0,0 +1,63 @@ +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; +} + +a#boxclose { + float:right; + text-decoration:none; + color:#de5757; +} + +a#boxclose:hover { +color:#7f7f7f; +} \ No newline at end of file From 1283454a6d886b24076dd5ce456f2f0ca8fe6a98 Mon Sep 17 00:00:00 2001 From: Adam Date: Sun, 9 Nov 2014 14:21:31 +0000 Subject: [PATCH 2/2] changed JS so modals are re-usable --- modal/app.js | 52 ++++++++++++++++++++++++++++++++++++++---------- modal/index.html | 7 +++---- modal/main.css | 16 +++------------ 3 files changed, 47 insertions(+), 28 deletions(-) diff --git a/modal/app.js b/modal/app.js index 9e3151d..5bb66c9 100644 --- a/modal/app.js +++ b/modal/app.js @@ -1,19 +1,49 @@ $(document).ready(function () { - //Modal popup //Activate modal when button is pressed - $('#modal_trigger').click(function(){ - $('#modal_overlay').fadeIn('fast',function(){ - $('#modal_popup').css('display', 'block'); //Overwrite CSS rule to display the modal - }); + $('.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 when button is pressed - $('#boxclose').click(function(){ - $('#modal_popup').css('display', 'none'); //Overwrite CSS rule to close the modal - $('#modal_overlay').fadeOut('fast'); - + $('.close_modal').click(function(){ + + //call function to close the modal by clicking anywhere on the overlay + close_modal(); + }); -}); \ No newline at end of file +}); + +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 index 5d30e24..35d0372 100644 --- a/modal/index.html +++ b/modal/index.html @@ -10,12 +10,11 @@ - + - + -