diff --git a/modal/app.js b/modal/app.js index e69de29..d5c2c8e 100644 --- a/modal/app.js +++ b/modal/app.js @@ -0,0 +1,36 @@ +'use strict'; + +$(document).ready(function() { + + // Creating modal window + $('.modal').dialog({ + bgiframe: true, + autoOpen: false, + modal: true, + width: '600px', + appendTo: '.wrapper', + 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() { + $('.modal').dialog('open'); + + // Closing window + $('.modal').bind('click', function() { + $(this).dialog('close'); + }); + }); + + // 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 3f5a285..c0fb131 100644 --- a/modal/index.html +++ b/modal/index.html @@ -10,18 +10,24 @@ +
- + -

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 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; +} +