Permalink
Browse files

Added login pop-up box example for kids to emulate to make sign up bo…

…x work.
  • Loading branch information...
1 parent 5f65d1a commit 3bf82adaeb5e5cba1cd68c603f81732218d210b4 Flyswatter committed Oct 30, 2012
Showing with 42 additions and 2 deletions.
  1. +14 −0 index.html
  2. +14 −1 index.js
  3. +14 −1 style.css
View
14 index.html
@@ -1,5 +1,19 @@
<html>
<head>
+
+ <!--This is the pop-up box for logging in. Can you make one for signing up?-->
+ <div class="popUp" id="loginPopUp">
+ <h3>Log In</h3>
+ <form id="loginForm">
+ <input type="text" placeholder="username"></input>
+ <input type="secure" placeholder="password"></input>
+ <input type="submit" class="button"></input>
+ <a href='#'><div class="button" id="cancel">Cancel</div></a>
+ <em><a id="forgot" href="#">Forgot Password?</a></em>
+ </form>
+ </div>
+ <!--End login box.-->
+
<div class="topmenu">
<span class="login button">log in </span>
<span class="signup button">sign up</span>
View
15 index.js
@@ -5,4 +5,17 @@ $('.bigList>li').click(function(event){
}else{
$(this).next().hide();
}
-});
+});
+
+//Below this line are the functions that make the login box work:
+$('.login').click(function(event){
+ console.log("Login clicked.");
+ event.preventDefault();
+ $('#loginPopUp').show(300);
+})
+
+$('#cancel').click(function(event){
+ event.preventDefault();
+ console.log("Cancel Clicked.");
+ $('.popUp').hide(300);
+})
View
15 style.css
@@ -98,7 +98,6 @@ background: -o-linear-gradient(top, rgba(180,221,180,1) 6%,rgba(252,255,104,1)
background: -ms-linear-gradient(top, rgba(180,221,180,1) 6%,rgba(252,255,104,1) 57%,rgba(82,177,82,1) 91%,rgba(82,177,82,1) 91%,rgba(82,177,82,1) 91%,rgba(0,87,0,1) 100%,rgba(0,138,0,1) 100%,rgba(0,138,0,1) 100%,rgba(0,36,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(180,221,180,1) 6%,rgba(252,255,104,1) 57%,rgba(82,177,82,1) 91%,rgba(82,177,82,1) 91%,rgba(82,177,82,1) 91%,rgba(0,87,0,1) 100%,rgba(0,138,0,1) 100%,rgba(0,138,0,1) 100%,rgba(0,36,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=0 ); /* IE6-9 */
-
}
.login:active{
background: rgb(252,255,104); /* Old browsers */
@@ -132,5 +131,19 @@ background: -ms-linear-gradient(top, rgba(252,255,104,1) 21%,rgba(180,221,180,1
background: linear-gradient(to bottom, rgba(252,255,104,1) 21%,rgba(180,221,180,1) 21%,rgba(252,255,104,1) 21%,rgba(252,255,104,1) 100%,rgba(82,177,82,1) 100%,rgba(82,177,82,1) 100%,rgba(82,177,82,1) 100%,rgba(0,138,0,1) 100%,rgba(0,36,0,1) 100%,rgba(82,177,82,1) 100%,rgba(0,87,0,1) 100%,rgba(0,138,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcff68', endColorstr='#008a00',GradientType=0 ); /* IE6-9 */
}
+.popUp{
+ position:absolute;
+ top:0px;
+ right:0px;
+ width:350px;
+ height:300px;
+ background-color:#9EB;
+ border-radius: 10px;
+ padding:10px;
+ display:none;
+}
+#forgot{
+ font-size: 24px;
+}

0 comments on commit 3bf82ad

Please sign in to comment.