0
JQueryポップアップに興味深い問題があります。ナビで「ログイン」または「サインアップ」をクリックすると、ポップアップが表示されます。各ポップアップの下部には、他のプロセスへのリンクがあります。だから、 "ログイン"ポップアップでは、一番下に「会員ではありませんか？サインアップをクリックすると、ログインポップアップが閉じられ、サインアップポップアップが開きます。しかし、サインアップポップアップの場合、このプロセスは、ログインポップアップが最初に開く場合にのみ発生します。なぜこのバグが起きているのか分かりません。どんな助けでも大変感謝していますか？このJQuery Popupのバグはどのように修正されましたか？
/* 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,
#signup_title {
font-family: 'Open Sans', sans-serif;
font-size: 23px;
letter-spacing: 1px;
position: relative;
top: -20px;
left: 110px;
}
#signup_title {
left: 80px;
}
#login_username,
#login_password,
#signup_username,
#signup_password,
#signup_email {
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,
#signup_username:focus,
#signup_password:focus,
#signup_email:focus {
border: 1px solid #4096ee;
}
#login_submit,
#signup_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 */
.dropdown_content {
display: none;
position: absolute;
background: white;
color: #555;
border: 1px solid #DEDEDE;
border-top: none;
min-width: 220px;
/* left: 1250px;
top: 47px; */
border-radius: 3px;
z-index: 10;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
top: 44px;
left: -125px;
}
.dropdown_content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 16px;
}
.dropdown_content a:hover {
color: #4096EE;
}
.dropdown:hover .dropdown_content {
display: block;
}
#dropdown_caret {
color: white;
position: absolute;
top: -10px;
left: 135px;
}
#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,
#signup_line {
background: #ccc;
height: 1px;
width: 490px;
position: relative;
top: 25px;
left: -50px;
}
#signup_line {
top: 78px;
}
#login_crossSection,
#signup_crossSection {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: black;
position: relative;
top: 37px;
left: 90px;
}
#login_crossSection a,
#signup_crossSection a {
color: #4096EE;
cursor: pointer;
}
#login_crossSection a:hover,
#signup_crossSection a:hover {
text-decoration: underline;
}
</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 -->
<!-- Sign Up Popup -->
<div id="Popup2" class="Modal">
<div class="content">
<span id='signup_title'> Ready for awesome? </span>
<br>
<form action='' method='post'>
<span id='signup_failed'></span>
<input id='signup_username' placeholder='Username' name='signup_username'>
<br>
<br>
<span id='signup_username_error'></span>
<input id='signup_email' placeholder='Email' name='signup_email'>
<br>
<br>
<span id='signup_email_error'></span>
<input id='signup_password' placeholder='Password' name='signup_password' type='password'>
<br>
<br>
<span id='signup_password_error'></span>
<input type='button' value='Sign Up' id='signup_submit' onclick='checkErrors()'>
</form>
<!-- Cross Section -->
<div id='signup_line'></div>
<span id='signup_crossSection'> Already a member? <a href='#'> Login </a> </span>
<!-- End of Cross Section -->
<span class="close"></div>
</div>
<!-- End of Sign Up Popup -->
<!-- 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").trigger('expose:close');
$("#Popup2").trigger('expose:open');
});
$("#signup_crossSection a").click(function() {
$("#Popup2").trigger('expose:close');
$("#Popup").trigger('expose:open');
});
$(".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>
ありがとうございます... – TimeOverflow