I'm trying to figure out this JQuery Popup, I can show it on click of "Login" or "Sign Up." But on click of "Login", then on "Sign Up." I want to hide the Login popup and show the Sign Up popup. But it only hides the Login popup and doesn't show the Sign Up popup. How do I fix this?
/* font */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
a {
text-decoration: none;
}
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
/* end of nav */
/* index.php */
#course_MainTitle {
font-family: 'Open Sans', sans-serif;
font-size: 24px;
position: relative;
left: 187px;
top: 20px;
}
#nav_logo {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 20px;
position: relative;
left: 188px;
top: 9px;
}
/* Search Engine */
#search_engine {
background: white;
color: #353535;
outline: none;
width: 500px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
padding: 7px 30px 7px 10px;
border: none;
border-radius: 3px;
position: relative;
top: 9px;
left: 210px;
}
#search_engine::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #353535;
}
#search_engine:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #353535;
opacity: 1;
}
#search_engine::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #353535;
opacity: 1;
}
#search_engine:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #353535;
}
/* End of Search Engine */
/* Login & Sign Up */
#login_nav_div, #signup_nav_div {
float: right;
font-family: 'Open Sans', sans-serif;
color: #353535;
font-size: 17px;
padding: 7px 30px 7px 10px;
border-radius: 3px;
margin-right: 10px;
position: relative;
left: -66px;
background: white;
top: 6px;
}
#login, #signup {
position: relative;
top: -1px;
left: 9px;
}
/* End of Login & Sign Up */
/* end of index.php */
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src='main.js'></script>
<style>
/***********************
Modal Module - Title CSS FTW
***********************/
.Modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
visibility: hidden;
}
.Modal .content {
position: absolute;
left: 50%;
top: 30%;
width: 390px;
padding: 50px;
border-radius: 3px;
background: #fff;
transform: translate(-50%, -30%) scale(0);
z-index: 50;
}
.Modal .close {
position: absolute;
top: 8px;
right: 8px;
display: block;
width: 18px;
height: 18px;
padding: 2px;
line-height: 18px;
border-radius: 50%;
text-align: center;
cursor: pointer;
background: #C5C5C5;
color: #fff;
}
.Modal .close:before {
content: '2715';
}
.Modal.is-visible {
visibility: visible;
background: rgba(0, 0, 0, 0.5);
transition: background .35s;
transition-delay: .1s;
z-index: 40;
}
.Modal.is-visible .content {
transform: translate(-50%, -30%) scale(1);
transition: transform .35s;
}
/* Model */
#login_title {
font-family: 'Open Sans', sans-serif;
font-size: 23px;
letter-spacing: 1px;
position: relative;
top: -20px;
left: 110px;
}
#login_username, #login_password {
outline: none;
border: 1px solid #ccc;
color: #353535;
padding: 12px 10px 12px 10px;
border-radius: 3px;
font-size: 16px;
position: relative;
left: -30px;
width: 425px;
font-family: 'Open Sans', sans-serif;
}
#login_username:focus, #login_password:focus {
border: 1px solid #4096ee;
}
#login_submit {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,4096ee+100;Blue+Flat+%232 */
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4096ee 0%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
color: white;
text-align: center;
padding: 11px 12px 11px 12px;
font-size: 22px;
width: 445px;
font-weight: normal;
position: relative;
top: 5px;
border-radius: 3px;
float: left;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
cursor: pointer;
position: relative;
left: -28px;
font-weight: bold;
}
#login_submit:focus, #login_submit:hover {
background: rgb(37,141,200);
}
/* End of Model */
/* Error Messages */
#login_username_error, #login_password_error, #login_failed {
font-family: 'Open Sans', sans-serif;
color: #DD4B39;
position: relative;
left: -30px;
top: -8px;
font-weight: bold;
display: none;
}
/* End of Error Messages */
/* $_SESSION["id"] set */
#user_avatar {
float: left;
width: 28px;
height: 28px;
border-radius: 50%;
position: relative;
top: -2px;
left: -10px;
}
#user_username {
color: white;
float: right;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 16px;
position: relative;
top: -31px;
left: -220px;
text-transform: capitalize;
padding: 10px;
}
/* Drop Down */
#login_label {
font-family: 'Open Sans', sans-serif;
cursor: pointer;
padding: 5px 5px 5px 20px;
}
#login_remember, #login_label {
position: relative;
top: 25px;
left: -30px;
}
#login_label {
left: -52px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
a #forgot_password {
color: black;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
position: relative;
top: 25px;
left: 120px;
}
a #forgot_password:hover {
text-decoration: underline;
}
#login_line {
background: #ccc;
height: 1px;
width: 490px;
position: relative;
top: 25px;
left: -50px;
}
#login_crossSection {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: black;
position: relative;
top: 37px;
left: 90px;
}
#login_crossSection a {
color: #4096EE;
cursor: pointer;
}
#login_crossSection a:hover {
text-decoration: underline;
}
/* End of Drop Down */
/* End of $_SESSION["id"] set */
</style>
</head>
<body>
<!-- Login Popup -->
<div id="Popup" class="Modal">
<div class="content">
<span id='login_title'> Welcome Back </span> <br>
<form action='' method='post'>
<span id='login_failed'></span>
<input id='login_username' placeholder='Username' name='login_username'> <br> <br>
<span id='login_username_error'></span>
<input id='login_password' placeholder='Password' name='login_password' type='password'> <br> <br>
<span id='login_password_error'></span>
<input type='button' value='Login' id='login_submit' onclick='checkErrors()'>
</form>
<!-- Remember Me -->
<input type='checkbox' name='login_remember' id='login_remember'> <label for='login_remember' id='login_label'> Remember Me </label>
<!-- End of Remember Me -->
<!-- Forgot Password? -->
<a href='#'> <span id='forgot_password'> Forgot Password? </span> </a> <br> <br>
<!-- End of Forgot Password -->
<!-- Cross Section -->
<div id='login_line'></div>
<span id='login_crossSection'> Not a member yet? <a href='#'> Sign Up </a> </span>
<!-- End of Cross Section -->
<span class="close"></div>
</div>
<!-- End of Login Popup -->
<!-- Sign Up Popup -->
<div id="Popup2" class="Modal">
<div class="content">
<span id='login_title'> Welcome Hi </span> <br>
<form action='' method='post'>
<span id='login_failed'></span>
<input id='login_username' placeholder='Username' name='login_username'> <br> <br>
<span id='login_username_error'></span>
<input id='login_password' placeholder='Password' name='login_password' type='password'> <br> <br>
<span id='login_password_error'></span>
<input type='button' value='Login' id='login_submit' onclick='checkErrors()'>
</form>
<!-- Remember Me -->
<input type='checkbox' name='login_remember' id='login_remember'> <label for='login_remember' id='login_label'> Remember Me </label>
<!-- End of Remember Me -->
<!-- Forgot Password? -->
<a href='#'> <span id='forgot_password'> Forgot Password? </span> </a> <br> <br>
<!-- End of Forgot Password -->
<!-- Cross Section -->
<div id='login_line'></div>
<!-- End of Cross Section -->
<span class="close"></div>
</div>
<!-- End of Sign Up Popup -->
<!-- nav -->
<div id='nav'>
<a href='index.php'> <span id='nav_logo'> Logo </span> </a>
<!-- Search Engine -->
<input id='search_engine' placeholder='Search Courses'>
<!-- End of Search Engine -->
<!-- Sign Up -->
<a href='#Popup2' class='button'> <div id='signup_nav_div'>
<span id='signup'> Sign Up </span>
</div> </a>
<!-- End of Sign Up -->
<!-- Login -->
<a href='#Popup' class='button'> <div id='login_nav_div'>
<span id='login'> Login </span>
</div> </a>
<!-- End of Login -->
}
?>
</div>
<!-- end of nav -->
<script>
$.fn.expose = function(options) {
var $modal = $(this),
$trigger = $('a[href="' + this.selector + '"]');
$modal.on("expose:open", function() {
$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});
$modal.on("expose:close", function() {
$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});
$trigger.on("click", function(e) {
e.preventDefault();
$modal.trigger("expose:open");
});
$modal.on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});
return;
}
// Example Cancel Button
$("#login_nav_div").click(function() {
$("#Popup").expose();
});
$("#signup_nav_div").click(function() {
$("#Popup2").expose();
});
$("#login_crossSection a").click(function() {
$("#Popup").hide();
$("#Popup2").expose();
});
$(".cancel").on("click", function(e) {
console.log('a')
e.preventDefault();
$(this).trigger("expose:close");
});
// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {
alert("Modal Opened!");
});
$("#Popup").on("expose:closed", function() {
alert("Modal Closed!");
});
*/
function checkErrors() {
if($("#login_remember").is(":checked")) {
var checked = 1;
} else {
checked = 0;
}
var login_username_val = $("#login_username").val().length;
var login_password_val = $("#login_password").val().length;
var login_username = $("#login_username").val();
var login_password = $("#login_password").val();
if(login_username_val < 1) {
$("#login_username_error").show().text("Username Required");
$("#login_failed").hide();
$("#login_username").css("border", "1px solid #DD4B39");
} else {
$("#login_username_error").hide();
$("#login_username").css("border", "");
}
if(login_password_val < 1) {
$("#login_password_error").show().text("Password Required");
$("#login_failed").hide();
$("#login_password").css("border", "1px solid #DD4B39");
} else {
$("#login_password_error").hide();
$("#login_password").css("border", "");
}
if(login_password_val > 0 && login_username_val > 0) {
$.post("check.php?checked="+checked, {username: login_username, password: login_password}, function(data) {
if(data == "Login Worked") {
location.reload();
}
if(data == "Login Failed") {
$("#login_failed").show().text("Login Failed");
}
});
}
}
</script>
</body>
Aucun commentaire:
Enregistrer un commentaire