0
Ich versuche, dieses JQuery Popup herauszufinden, kann ich es bei Klick auf "Login" oder "Registrieren" zeigen. Aber mit einem Klick auf "Login", dann auf "Anmelden" im Login-Modell funktioniert es nicht. Diese Funktion steht hier zur Verfügung, damit Benutzer sich vom Anmeldemodell aus anmelden können, ohne das Anmeldemodell schließen zu müssen, und dann auf die Schaltfläche "Anmelden" klicken. Ich möchte das Login-Popup ausblenden und das Anmelde-Popup anzeigen. Aber es versteckt nur das Login-Popup und zeigt nicht das Anmelde-Popup an. Wie behebe ich das?Wie kann ich dieses JQuery Popup funktionieren lassen?
/* 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>
/***********************\
\t 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 -->
\t <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 -->
\t <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>