From 05af0b635476f4f53564d5722ce8694c1a6bd62a Mon Sep 17 00:00:00 2001 From: byverdu Date: Mon, 22 Dec 2014 01:59:39 +0000 Subject: [PATCH 1/6] added extra markup and cdn jquery UI --- modal/index.html | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/modal/index.html b/modal/index.html index 3f5a285..ca246c5 100644 --- a/modal/index.html +++ b/modal/index.html @@ -11,17 +11,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 +
+

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 +
+ \ No newline at end of file From 3e252d3c5143e3d638a27404e55ffaf4ace1bb9e Mon Sep 17 00:00:00 2001 From: byverdu Date: Mon, 22 Dec 2014 02:00:13 +0000 Subject: [PATCH 2/6] added jquery code for the modal window --- modal/app.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/modal/app.js b/modal/app.js index e69de29..b599fb3 100644 --- a/modal/app.js +++ b/modal/app.js @@ -0,0 +1,20 @@ +'use strict'; + +$(document).ready(function() { + + $('.modal').dialog({ + bgiframe: true, + autoOpen: false, + modal: true, + hide: { effect: 'fold', duration: 1000 } + }); + + $('.popUp').on('click', function() { + $('body').css('background', 'RGBA(40, 42, 54,0.7)'); + $('.modal').dialog('open'); + $('.modal').bind('click', function() { + $(this).dialog('close'); + $('body').css('background', 'RGBA(255,255,255,1)'); + }); + }); +}); \ No newline at end of file From f2a3644cb0e13774c23005db65f69f1b4d9872ff Mon Sep 17 00:00:00 2001 From: byverdu Date: Mon, 22 Dec 2014 02:53:10 +0000 Subject: [PATCH 3/6] added html wrapper and refactored jquery code --- modal/app.js | 17 +++++++++++++---- modal/index.html | 2 ++ 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/modal/app.js b/modal/app.js index b599fb3..f40f53d 100644 --- a/modal/app.js +++ b/modal/app.js @@ -1,20 +1,29 @@ 'use strict'; $(document).ready(function() { - + + // Creating modal window $('.modal').dialog({ bgiframe: true, autoOpen: false, modal: true, - hide: { effect: 'fold', duration: 1000 } + width: '600px', + appendTo: '.wrapper', + hide: { effect: 'fold', duration: 1000 }, + close: function(){ + $('body').css('background', 'RGB(255, 255, 255)'); + } }); + // Showing modal window $('.popUp').on('click', function() { - $('body').css('background', 'RGBA(40, 42, 54,0.7)'); + $('body').css('background', 'RGB(40, 42, 54)'); $('.modal').dialog('open'); + + // Closing window $('.modal').bind('click', function() { $(this).dialog('close'); - $('body').css('background', 'RGBA(255,255,255,1)'); + $('body').css('background', 'RGB(255, 255, 255)'); }); }); }); \ No newline at end of file diff --git a/modal/index.html b/modal/index.html index ca246c5..b05b743 100644 --- a/modal/index.html +++ b/modal/index.html @@ -10,6 +10,7 @@ +
@@ -22,6 +23,7 @@

The Cassini Mission

Read more about the mission
+ From 18814506349caa7a70872072969fa48faadceb82 Mon Sep 17 00:00:00 2001 From: byverdu Date: Mon, 22 Dec 2014 03:26:07 +0000 Subject: [PATCH 4/6] custom way to close the modal --- modal/app.js | 7 +++++++ modal/index.html | 1 + 2 files changed, 8 insertions(+) diff --git a/modal/app.js b/modal/app.js index f40f53d..dc5e484 100644 --- a/modal/app.js +++ b/modal/app.js @@ -26,4 +26,11 @@ $(document).ready(function() { $('body').css('background', 'RGB(255, 255, 255)'); }); }); + + // Custom closing the modal + + $('.closeModal').on('click', function() { + + $('.modal').dialog('close'); + }); }); \ No newline at end of file diff --git a/modal/index.html b/modal/index.html index b05b743..c0fb131 100644 --- a/modal/index.html +++ b/modal/index.html @@ -16,6 +16,7 @@
+

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.

From 9dcb78d763ac6d9450739afa34189bf15d1009ae Mon Sep 17 00:00:00 2001 From: byverdu Date: Mon, 22 Dec 2014 03:28:25 +0000 Subject: [PATCH 5/6] refactored jquery code --- modal/app.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/modal/app.js b/modal/app.js index dc5e484..d5c2c8e 100644 --- a/modal/app.js +++ b/modal/app.js @@ -9,28 +9,28 @@ $(document).ready(function() { modal: true, width: '600px', appendTo: '.wrapper', - hide: { effect: 'fold', duration: 1000 }, + hide: { effect: 'explode', duration: 1000 }, close: function(){ $('body').css('background', 'RGB(255, 255, 255)'); + }, + open: function(){ + $('body').css('background', 'RGB(40, 42, 54)'); } }); // Showing modal window $('.popUp').on('click', function() { - $('body').css('background', 'RGB(40, 42, 54)'); $('.modal').dialog('open'); // Closing window $('.modal').bind('click', function() { $(this).dialog('close'); - $('body').css('background', 'RGB(255, 255, 255)'); }); }); // Custom closing the modal $('.closeModal').on('click', function() { - $('.modal').dialog('close'); }); }); \ No newline at end of file From 51a825ec25cb5df15d724463df0cf577c5f38860 Mon Sep 17 00:00:00 2001 From: byverdu Date: Mon, 22 Dec 2014 03:31:33 +0000 Subject: [PATCH 6/6] added CSS styles --- modal/main.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/modal/main.css b/modal/main.css index e69de29..169775a 100644 --- a/modal/main.css +++ b/modal/main.css @@ -0,0 +1,42 @@ +/* CSS Styles */ + +@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300); + +.wrapper{ + width: 960px; + margin: 50px auto; + font-family: monospace; +} + +.popUp{ + width: 350px; + height: 30px; + box-shadow: 0 0 1px black; + position: relative; + left: 33%; + top: 100px; +} + +.modal{ + background: white; + box-shadow: 0 0 5px white; + text-align: center; + padding: 15px; +} + +.modal p{ + text-align: justify; + line-height: 25px; + font-family: 'Open Sans Condensed', sans-serif; + font-size: 18px; +} + +.modal a { + color: RGB(194, 46, 79); +} + + +.ui-dialog-titlebar-close{ + display: none; +} +