Skip to content

Modal popup example #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
byverdu wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Modal popup example #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
05af0b6
added extra markup and cdn jquery UI
byverdu Dec 22, 2014
3e252d3
added jquery code for the modal window
byverdu Dec 22, 2014
f2a3644
added html wrapper and refactored jquery code
byverdu Dec 22, 2014
1881450
custom way to close the modal
byverdu Dec 22, 2014
9dcb78d
refactored jquery code
byverdu Dec 22, 2014
51a825e
added CSS styles
byverdu Dec 22, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions modal/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
});
});
18 changes: 12 additions & 6 deletions modal/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,24 @@
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<!-- Modal Trigger -->
<button>Read about The Cassini Mission</button>
<button class="popUp">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>
<div class="modal">
<button class="closeModal">Close</button>
<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>
</div>
<!-- Modal Content End -->
</div>

<script src="../lib/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="app.js"></script>
</body>
</html>
42 changes: 42 additions & 0 deletions modal/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}