我是网页设计新手，我正在网站上工作。我按照教程使用脚本制作弹出式登录/注册框，问题是它不能正常工作。我认为这与z-index有关，但我尝试将其更改为不同的值（甚至1500以上）无济于事。
此外，由于某种原因，“关闭”/“x”按钮已停止工作。你能告诉我我做错了什么吗？
这里是代码（html）和CSS：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href='http://fonts.googleapis.com/css?family=Varela+Round|Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$("#loginLink").click(function( event ){
event.preventDefault();
$(".overlay").fadeToggle("fast");
});
$(".overlayLink").click(function(event){
event.preventDefault();
var action = $(this).attr('data-action');
$("#loginTarget").load("ajax/" + action);
$(".overlay").fadeToggle("fast");
});
$(".close").click(function(){
$(".overlay").fadeToggle("fast");
});
$(document).keyup(function(e) {
if(e.keyCode == 27 && $(".overlay").css("display") != "none" ) {
event.preventDefault();
$(".overlay").fadeToggle("fast");
}
});
});
</script>
</head>
<body>
<!--- LOGIN OVERLAY ---->
<div class="overlay" style="display: none;" >
<div class="login-wrapper">
<div class="login-content" id = "loginTarget">
<p>Loading...</p>
</div>
</div>
</div>
<!--- SOCIAL INTEGRATION --->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--- TOP SECTION + MENU ---->
<header role="banner">
<nav role="navigation">
<ul>
<li>
<a href="index.htm">
<div>
Home
<span>The most honest reviews!</span>
</div>
</a>
</li>
<li>
<a href="#">
<div>
Reviews
<span>Placeholder</span>
</div>
</a>
<div>
<ul>
<li><a href="#">PC</a></li>
<li><a href="#">Consoles</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Software</a></li>
</ul>
</div>
</li>
<li>
<a href="contact.htm">
<div>
Contact
<span>Contact us!</span>
</div>
</a>
</li>
<li>
<a href="/forum">
<div>
Forum
<span>Connect with others</span>
</div>
</a>
</li>
<li id = "loginbutton">
<a href="controlpanel.php">
<div>
User
<span>Placeholder</span>
</div>
</a>
<div>
<ul>
<li><a href="login.php" class="overlayLink" data-action="login-form.html" id="loginLink">Login</a></li>
<li><a href="register.php" class="overlayLink" data-action="registration-form.html">Register</a></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
<body>
<!--- LOGIN OVERLAY ---->
<section class = "container">
<h1>HONEST REVIEWS</h1>
<ul>
<li><a href="login.php" class="overlayLink" data-action="login-form.html">Log-in</a></li>
<li><a href="register.php" class="overlayLink" data-action="registration-form.html">Register</a></li>
</ul>
</section>
<article>
<div class ="textreview">
<h2>First Review</h2>
<h3>How Homeworld revolutionized 3D RTS</h3>
<h4>By Andrei Negut</h4>
<div class="videocontainer">
<video width="640" height = "480" controls id="video">
<source src = "media/An Introduction to Homeworld Remastered Collection.mp4" type= "video/mp4">
</video>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec tempor nulla. Quisque luctus neque quis porta viverra. Nam vel feugiat mauris. Mauris sagittis ipsum nec nisi gravida, vehicula iaculis tortor placerat. Duis tincidunt auctor ex, vitae tristique est dictum non. Quisque placerat facilisis enim et aliquet. Proin suscipit urna in metus laoreet pretium. In porttitor malesuada tincidunt. Curabitur accumsan nisi at felis aliquet, id accumsan mi scelerisque. In ullamcorper ultrices lacinia. In aliquet lorem ligula, et scelerisque orci semper sit amet. Donec id aliquet purus, non faucibus est.
</p>
Quisque pharetra eros dolor, eget ornare dolor porttitor eu. In et tempus dolor. Sed metus lorem, cursus in accumsan ut, sodales eu enim. Quisque commodo finibus ex id scelerisque. Duis iaculis porttitor nulla eu dignissim. Cras est eros, fermentum eu luctus sit amet, egestas non lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Sed aliquet nibh leo. Morbi eu nisi orci. Aenean ut auctor tellus. Integer ut purus vel quam commodo elementum. Integer scelerisque est eget elit consequat congue.
<p>
Duis convallis lectus sed rutrum cursus. Maecenas at tempor mauris, vel vulputate lorem. Morbi maximus ipsum metus, at euismod risus viverra eget. Nullam commodo ex vel nisl eleifend sagittis. Nunc sed rhoncus justo, a porta sem. Ut non augue eget nulla tincidunt finibus pellentesque eu risus. Praesent vitae velit nec libero mattis feugiat. Fusce a lorem ullamcorper, vehicula risus a, euismod lacus. Nam at facilisis orci. Vivamus egestas, metus et viverra congue, nunc dolor volutpat massa, eu laoreet tortor nisi eu felis. Sed vitae dignissim nisi. Sed quis sagittis odio. Maecenas posuere, quam ut hendrerit convallis, risus orci lobortis tellus, non commodo sem felis eget quam. Donec lobortis maximus erat, vitae tempus ex vestibulum vel. Donec ornare neque risus, eu eleifend ex efficitur vel. Donec hendrerit tincidunt venenatis.
</p>
Quisque nec enim auctor, vestibulum lorem eu, luctus massa. Vestibulum mollis posuere nibh, vel imperdiet libero pellentesque in. Donec ac pulvinar dolor, eget aliquet ante. Pellentesque aliquam justo non arcu pharetra scelerisque. Ut semper risus id sem fermentum pulvinar. Duis convallis lobortis justo, non fermentum tortor pretium eget. Nullam et cursus tellus. Sed eu finibus nunc. Pellentesque vestibulum nibh libero, at gravida augue feugiat vel. Vestibulum nec libero aliquam, aliquet elit et, vestibulum justo. Mauris tincidunt nibh vitae nunc placerat imperdiet. Donec ut nisi eget ligula mollis molestie vel sit amet quam.
<p>
In et velit fringilla, fermentum tortor nec, efficitur purus. Aenean et ipsum vitae mauris semper tristique. Vestibulum ac scelerisque ipsum. Nulla facilisi. Nulla venenatis lorem et laoreet tempus. Curabitur mattis ex quis dolor sagittis feugiat. Quisque fringilla urna sed nunc maximus, quis luctus justo accumsan. Mauris a malesuada erat. Mauris sed ipsum vitae est tempor gravida sed non mauris. Phasellus auctor sapien id posuere placerat. Cras id tortor a nisi fermentum molestie eget pretium metus. Integer et ultrices mi.
</p>
</div>
<!-- <div class = "controlbar" id ="controlbar">
<button class = "videobutton" onclick="playPause()">Play/Pause</button>
<button class="videobutton"onclick="makeSmall()">360p</button>
<button class="videobutton" onclick="makeNormal()">480p</button>
<button class="videobutton" onclick="makeBig()">720p</button>
<button class="videobutton" onclick="makeHD()">Original</button>
</div>
<script>
var video = document.getElementById("video");
function playPause() {
if (video.paused)
video.play();
else
video.pause();
}
function makeSmall() {
video.width = 360;
controlbar.width = 360;
}
function makeNormal() {
video.width = 640;
controlbar.width = 640;
}
function makeBig() {
video.width = 720;
controlbar.width = 720;
}
function makeHD(){
video.width = 1080;
controlbar.width = 1080;
}
</script> --->
</article>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec tempor nulla. Quisque luctus neque quis porta viverra. Nam vel feugiat mauris. Mauris sagittis ipsum nec nisi gravida, vehicula iaculis tortor placerat. Duis tincidunt auctor ex, vitae tristique est dictum non. Quisque placerat facilisis enim et aliquet. Proin suscipit urna in metus laoreet pretium. In porttitor malesuada tincidunt. Curabitur accumsan nisi at felis aliquet, id accumsan mi scelerisque. In ullamcorper ultrices lacinia. In aliquet lorem ligula, et scelerisque orci semper sit amet. Donec id aliquet purus, non faucibus est.
Quisque pharetra eros dolor, eget ornare dolor porttitor eu. In et tempus dolor. Sed metus lorem, cursus in accumsan ut, sodales eu enim. Quisque commodo finibus ex id scelerisque. Duis iaculis porttitor nulla eu dignissim. Cras est eros, fermentum eu luctus sit amet, egestas non lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Sed aliquet nibh leo. Morbi eu nisi orci. Aenean ut auctor tellus. Integer ut purus vel quam commodo elementum. Integer scelerisque est eget elit consequat congue.
Duis convallis lectus sed rutrum cursus. Maecenas at tempor mauris, vel vulputate lorem. Morbi maximus ipsum metus, at euismod risus viverra eget. Nullam commodo ex vel nisl eleifend sagittis. Nunc sed rhoncus justo, a porta sem. Ut non augue eget nulla tincidunt finibus pellentesque eu risus. Praesent vitae velit nec libero mattis feugiat. Fusce a lorem ullamcorper, vehicula risus a, euismod lacus. Nam at facilisis orci. Vivamus egestas, metus et viverra congue, nunc dolor volutpat massa, eu laoreet tortor nisi eu felis. Sed vitae dignissim nisi. Sed quis sagittis odio. Maecenas posuere, quam ut hendrerit convallis, risus orci lobortis tellus, non commodo sem felis eget quam. Donec lobortis maximus erat, vitae tempus ex vestibulum vel. Donec ornare neque risus, eu eleifend ex efficitur vel. Donec hendrerit tincidunt venenatis.
Quisque nec enim auctor, vestibulum lorem eu, luctus massa. Vestibulum mollis posuere nibh, vel imperdiet libero pellentesque in. Donec ac pulvinar dolor, eget aliquet ante. Pellentesque aliquam justo non arcu pharetra scelerisque. Ut semper risus id sem fermentum pulvinar. Duis convallis lobortis justo, non fermentum tortor pretium eget. Nullam et cursus tellus. Sed eu finibus nunc. Pellentesque vestibulum nibh libero, at gravida augue feugiat vel. Vestibulum nec libero aliquam, aliquet elit et, vestibulum justo. Mauris tincidunt nibh vitae nunc placerat imperdiet. Donec ut nisi eget ligula mollis molestie vel sit amet quam.
In et velit fringilla, fermentum tortor nec, efficitur purus. Aenean et ipsum vitae mauris semper tristique. Vestibulum ac scelerisque ipsum. Nulla facilisi. Nulla venenatis lorem et laoreet tempus. Curabitur mattis ex quis dolor sagittis feugiat. Quisque fringilla urna sed nunc maximus, quis luctus justo accumsan. Mauris a malesuada erat. Mauris sed ipsum vitae est tempor gravida sed non mauris. Phasellus auctor sapien id posuere placerat. Cras id tortor a nisi fermentum molestie eget pretium metus. Integer et ultrices mi.
</p>
</aside>
<!--- LOGIN OVERLAY ---->
<div class="overlay" style="display: none;">
<div class="login-wrapper">
<div class="login-content" id = "loginTarget">
<p>Loading...</p>
</div>
</div>
</div>
<footer>
<small>Copyright © Andrei Negut 2015 </small>
<div class="fb-like" data-href="https://www.facebook.com/pages/Honest-Reviews/1498677940381771?fref=ts" data-width="150" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</footer>
</body>
</html>
这是CSS
* {margin: 0;padding: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
*:after, *:before { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section { display: block;}
html {font-size: 100%;height: auto !important;height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
.clear {display: block; }
.clear::after {clear: both;content: ".";display: block;height: 1px;visibility: hidden;}
html{
height:100%;
background-image: url("https://gearboxsoftwarecom.s3.amazonaws.com/images/_/20150220/6c640b6aaa926cd0e110cc11dd353ac217c30cbe.jpg");
background-attachment: scroll;
background-position: center center;
background-repeat: no-repeat;
z-index: -1;
}
body{
font-family: Tahoma, Geneva, sans-serif;
z-index: 1;
height:100%;
}
/* image background, just in case
img.background {
min-height: 100%;
min-width: 3480px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 3840px){
img.background{
left: 50%;
margin-left: -1920px; }
}
*/
/*OVERLAY*/
a.close {
background-color: rgb(204,204,204);
border-radius: 50%;
color: rgb(255,255,255);
display: block;
font-family: 'Varela Round', sans-serif;
font-size: .8em;
padding: .2em .5em;
position: absolute;
top: 1.25rem;
transition: all 400ms ease;
right: 1.25rem;
}
a.close:hover {
background-color: #1bc5b3;
cursor: pointer;
}
/*
* LOG-IN BOX
*/
div.overlay {
background-color: rgba(0,0,0,.25);
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
div.overlay > div.login-wrapper {
align-self: center;
background-color: rgba(0,0,0,.25);
border-radius: 2px;
padding: 6px;
width: 450px;
}
div.overlay > div.login-wrapper > div.login-content {
background-color: rgb(255,255,255);
border-radius: 2px;
padding: 24px;
position: relative;
}
div.overlay > div.login-wrapper > div.login-content > h3 {
color: rgb(0,0,0);
font-family: 'Varela Round', sans-serif;
font-size: 1.8em;
margin: 0 0 1.25em;
padding: 0;
}
/*
* FORM
*/
form label {
color: rgb(0,0,0);
display: block;
font-family: 'Varela Round', sans-serif;
font-size: 1.25em;
margin: .75em 0;
}
form input[type="text"],
form input[type="email"],
form input[type="number"],
form input[type="search"],
form input[type="password"],
form textarea {
background-color: rgb(255,255,255);
border: 1px solid rgb( 186, 186, 186 );
border-radius: 1px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
display: block;
font-size: .65em;
margin: 6px 0 12px 0;
padding: .8em .55em;
text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
transition: all 400ms ease;
width: 90%;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="number"]:focus,
form input[type="search"]:focus,
form input[type="password"]:focus,
form textarea:focus,
form select:focus {
border-color: #4195fc;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px #4195fc;
}
form input[type="text"]:invalid:focus,
form input[type="email"]:invalid:focus,
form input[type="number"]:invalid:focus,
form input[type="search"]:invalid:focus,
form input[type="password"]:invalid:focus,
form textarea:invalid:focus,
form select:invalid:focus {
border-color: rgb(248,66,66);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
}
form button {
background-color: #50c1e9;
border: 1px solid rgba(0,0,0,.1);
color: rgb(255,255,255);
font-family: 'Varela Round', sans-serif;
font-size: .85em;
padding: .55em .9em;
transition: all 400ms ease;
}
form button:hover {
background-color: #1bc5b3;
cursor: pointer;
}
input:invalid { color: red; } //if I want to change it later
/*LOGINFORM */
/*BUTTONSTYLE*/
/*BUTTONSTYLE END*/
h2 {
color: rgb(34,34,34);
font-size: 2.2em;
font-weight: 200;
margin: 0 0 24px 0;
}
/*BANNER + MENU*/
header {
background: linear-gradient(to left,rgba(255, 33, 0, 1) 0,rgba(139, 20, 14, 1) 100%);
border-bottom: 1px solid rgba(0,0,0,.1);
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
display: block;
position: fixed;
width: 100%;
z-index: 1000;
}
header > nav > ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
}
header > nav > ul > li {
flex: 0 1 auto;
margin: 0;
padding: 0;
position: relative;
transition: all linear 0.1s;
}
header > nav > ul > li:hover {
background: black;
}
header>nav>ul>#loginbutton{
position:fixed;
top:0;
right:0;
border: 2px dashed;
border-color:black;
padding-bottom: -2;
border-radius: 180px;
border-width: 1px;
}
header > nav > ul > li a + div {
background: linear-gradient(to bottom,rgba(255, 33, 0, 1) 0,black 100%);
border-radius: 0 0 2px 2px;
box-shadow: 0 3px 1px rgba(0,0,0,.05);
display: none;
font-size: 1rem;
position: absolute;
width: auto;
}
header > nav > ul > li:hover a + div {
display: block;
}
header > nav > ul > li a + div > ul {
list-style-type: none;
}
header > nav > ul > li a + div > ul > li {
margin: 0;
padding: 0;
}
header > nav > ul > li a + div > ul > li > a {
color: white;
display: block;
font-size: .75rem;
letter-spacing: 1.5px;
padding: .25rem 1.5rem;
text-decoration: none;
text-transform: uppercase;
}
header > nav > ul > li a + div > ul > li:hover > a {
background-color: rgba(0,0,0,.15);
}
header > nav > ul > li > a {
align-items: center;
color: #fff;
display: flex;
font-size: 1.55rem;
font-weight: 200;
letter-spacing: 1px;
max-width: 130px;
padding: 1rem 1.5rem;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.1);
transition: all linear 0.5s;
}
header > nav > ul > li > a > div > span {
color: rgba(255,255,255,.75);
display: block;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: .7rem;
font-style: italic;
line-height: 1rem;
max-width: 260px;
}
header > nav > ul > li > a {
max-width: 500px;
font-size: 1.6rem;
line-height: 1.8rem;
}
header > nav > ul > li > a > div > span {
margin: 4px 0 0;
}
@media (min-width: 990px) {
header > nav > ul > li > a {
max-width: 500px;
font-size: 1.7rem;
line-height: 2rem;
}
header > nav > ul > li > a > div > span {
margin: 4px 0 0;
}
}
/*Banner end*/
/*Footer*/
footer{
background: linear-gradient(to right,black,rgba(139, 20, 14, 1) 100%);
border-top: 1px solid rgba(0,0,0,.1);
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
display: block;
position: fixed;
width: 100%;
color: white;
bottom:0;
clear:both;
margin-bottom:0;
}
/*VIDEO AND BUTTONS*/
.videocontainer{
float:right;
height:480px;
width: 640px;
border-style: hidden;
border-radius: 5px;
display:block;
}
.controlbar{
position:relative;
display:flex;
background-color: grey;
opacity: 0.5;
width: 640px;
align-items:center;
flex: 1;
}
.videobutton{
position:relative;
border: none;
background-color: grey;
cursor:pointer;
border-style: none none none solid;
border-width: 1px;
font-weight: 700;
flex:1;
}
/*PAGE FORMATTING */
aside{
display:flex;
float:right;
border-style: solid;
width: 15%;
height:auto;
overflow: scroll;
background-color: white;
opacity: 0.7;
}
article{
display:flex;
width: 77%;
margin-right: 1,5%;
float:left;
background-color: black;
opacity: 0.7;
color: white;
}
#contactsection{
background-color: rgba(0,0,0,.25);
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#contact{
align-self: center;
background-color: rgba(0,0,0,.25);
border-radius: 2px;
padding: 6px;
width: 450px;
}
article.textreview{
display:block;
float:left;
}
.container{
padding: 90px 0;
margin: 0 auto;
background-color: black;
background-size: cover;
background-repeat:no-repeat;
background-position:center center;
z-index: 1500;
}
h1{
color: yellow;
}
.username_avail_result{
display:block;
width:180px;
}
.password_strength {
display:block;
width:180px;
padding:3px;
text-align:center;
color:#333;
font-size:12px;
backface-visibility:#FFF;
font-weight:bold;
}
.password_strength.weak{
background:#e84c3d;
}
.password_strength.normal{
background:#f1c40f;
}
.password_strength.strong{
background:#27ae61;
}
.password_strength.verystrong{
background:#2dcc70;
color:#FFF;
}
不稳定的行为只能在网络服务器上看到，所以我在这里托管了它：http://andreinegut.zz.vc/License/index.htm
注意：叠加在索引页面和联系页面上的行为有所不同。这就是为什么我怀疑它是关于z-index的原因，但我并不是100％肯定。
提前致谢！
答案 0 :(得分：0)
php调用是否正常执行？你试过打印结果吗？因为当我点击登录时，我在控制台上看到一个错误，我认为这会阻止javascript / css正确执行。