Skip to content

Commit

Permalink
styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@seanbehan
seanbehan committed Apr 24, 2012
1 parent 31dc2d7 commit e6339d8
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 46 deletions.
47 changes: 31 additions & 16 deletions index.html
View file
Expand Up @@ -2,14 +2,9 @@
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>Calendar</title>
<link rel='stylesheet' href='style.css' type='text/css' media='screen' charset='utf-8'>
<link rel='stylesheet' href='popbox.css' type='text/css' media='screen' charset='utf-8'>
<script type='text/javascript' charset='utf-8' src='../jquery.js'></script>
<script type='text/javascript' charset='utf-8' src='popbox.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>
<style type='text/css' media='screen'>
body {
text-align:center;
Expand All @@ -23,13 +18,24 @@
a { color:#999; text-decoration:none; }
label { display: block; }
form { margin: 25px; text-align:left }
form input[type=text] { padding:5px; width:90%; }

.popbox { width:150px; padding:5px; background:#DDD; border:solid 1px #FFF; border-radius:5px; box-shadow: 0px 0px 5px #CCC; }
form input[type=text] { padding:5px; width:90%; border:solid 1px #CCC;}
form textarea { padding:5px; width:90%; border:solid 1px #CCC; height:100px;}

.box { width:300px; }

footer {
font-size:12px;
}
footer a { color:#40738d; }
</style>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>
</head>
<body>
<h1>PopBox</h1>

<div class='popbox'>
<a class='pop' href='#'>
Expand All @@ -41,18 +47,27 @@
<div class='arrow'></div>
<div class='arrow-border'></div>

<form action='/' method='post' accept-charset='utf-8'>
<p><label for='first_name'>First Name</label><input type='text' name='first_name' value='' id='first_name'></p>
<p><label for='first_name'>Last Name</label><input type='text' name='first_name' value='' id='first_name'></p>
<p><input type='submit' value='Continue &rarr;'></p>
<form action="http://gristmill.createsend.com/t/j/s/nklki/" method="post" id="subForm">
<small>Please complete the form to sign up for our mailing list!</small>
<div class="input">
<input type="text" name="cm-name" id="name" placeholder="Name" />
</div>
<div class="input">
<input type="text" name="cm-nklki-nklki" id="nklki-nklki" placeholder="Email" />
</div>
<div class="input">
<textarea name="cm-f-tlhll" id="Message" placeholder="Let us know what you're looking for."></textarea>
</div>
<input type="submit" value="Get In Touch" /> <a href="#" class="cancel">Cancel</a>
</form>

</div>
</div>
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>jQuery PopBox is a simple, HighRise inspired balloon UI element.</p>

<footer>
Developed by <a href="http://twitter.com/_sbehan">Sean Behan</a> at <a href="http://gristmill.io">Gristmill</a>
</footer>
</body>
58 changes: 58 additions & 0 deletions popbox.css
View file
@@ -0,0 +1,58 @@
.popbox {
margin:0px auto;
text-align:center;
position:relative;
}

.collapse { position:relative; }

.pop {
background:#DDD;
border:solid 1px #FFF;
border-radius:5px;
box-shadow: 0px 0px 5px #CCC;
background:-webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#e8e8e8));
background:-moz-linear-gradient(top,#f4f4f4,#e8e8e8);
background:linear-gradient(top,#f4f4f4,#e8e8e8);
padding:8px;
}

.box {
display:block;
display:none;
background:#FFF;
border:solid 1px #BBBBBB;
border-radius:5px;
box-shadow:0px 0px 15px #999;
position:absolute;
}

.box a.cancel {
color:red;
font-size:12px;
font-family:arial;
text-decoration:underline;
}

.arrow {
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #FFF;
position:absolute;
left:1px;
top:-10px;
z-index:1001;
}

.arrow-border {
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #BBBBBB;
position:absolute;
top:-12px;
z-index:1000;
}
74 changes: 44 additions & 30 deletions popbox.js
View file
@@ -1,42 +1,56 @@
(function(){
$.fn.popbox = function(){
var open = function(event){
event.preventDefault()

var pop = $(this)
var box = $(this).parent().find('.box');

var arrow = box.find('.arrow');
var arrow_border = box.find('.arrow-border');

arrow.css({'left': box.width()/2 - 10});
arrow_border.css({'left': box.width()/2 - 10});

if(box.css('display') == 'block'){
close()
} else {
box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
$.fn.popbox = function(options){
var settings = $.extend({
'box': '.box',
'arrow': '.arrow',
'arrow-border': '.arrow-border',
'popbox': '.popbox',
'pop': '.pop',
'cancel': '.cancel'
}, options);

var methods = {
open: function(event){
event.preventDefault()

var pop = $(this)
var box = $(this).parent().find(settings['box']);

var arrow = box.find(settings['arrow']);
var arrow_border = box.find(settings['arrow-border']);

arrow.css({'left': box.width()/2 - 10});
arrow_border.css({'left': box.width()/2 - 10});

if(box.css('display') == 'block'){
methods.close
} else {
box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
}
},

close: function(){
$(settings['box']).fadeOut("fast")
}
}
};

var close = function(){
$('.box').fadeOut("fast")
}

this.each(function(){
$('.pop', this).bind('click', open)
});

$('body').bind('keyup', function(event){
$(document).bind('keyup', function(event){
if(event.keyCode == 27){
close();
methods.close()
}
});

$(document).bind('click', function(event){
if(!$(event.target).closest('.popbox').length){
close()
if(!$(event.target).closest(settings['popbox']).length){
methods.close()
}
});

return this.each(function(){
$(settings['pop'], this).bind('click', methods.open)
$(settings['pop'], this).parent().find(settings['cancel']).bind('click', methods.close)
});
}
}).call(this);

}).call(this);

0 comments on commit e6339d8

Please sign in to comment.