嗨大家我是网络开发新手， 我有一个日志按钮，它链接到我的网页上的登录表单。加载网页时，我的登录表单会弹出并显示在我的网页内容后面，而不会点击该按钮。
我在CSS中使用z-index=4000;将它放在内容的前面，但我不确定这是否是正确的方法。但是，在加载网页时，表单仍会自动显示，除非另外单击日志记录按钮，否则不应出现该表单。
我在这个问题上花了好几天时间，我无法弄清楚导致这个问题的原因，你的帮助对解决这个问题非常重要。非常感谢。
/* ------ top bar ------- */
.topbar{
background-color:#000;
position: fixed;
z-index: 5000;
height: 45px;
width: 100%;
top:0;
}
nav {
float:right;
}
.btn.login{
color:#fff;
}
.btn.signup {
color:#fff;
}
/*------End Top bar------ */
/*------------login area ---------*/
#loginModal{display:none;}
.loginbox{
width: 320px;
height: 380px;
background: #000;
color: #fff;
top: 60%;
left: 50%;
position:fixed;
transform: translate(-40%,-50%);
box-sizing: border-box;
padding: 60px 25px ;
border:dotted #049CD9;
border-radius: 20%;
}
.avatar{
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
h1{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p{
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input{
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 14px;
}
.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 40px;
background: #008EF5;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover
{
cursor: pointer;
background: #fb2525;
color: #000;
}
.loginbox a{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.loginbox a:hover
{
color: #ffc107;
}
/*------------End login area ---------*/
/*------- section one -------*/
.section1-bg{
background:url(../images/s1bg.jpg);
background-size: cover;
background-position: center;
padding-bottom: 30px;
padding-top: 30px;
}
.text-center h3{
font: 'Berkshire Swash', Helvetica, sans-serif;
color: #2b2b2b;
text-shadow: 2px 2px 0px blue, 8px 8px 0px rgba(0,0,0,0.25);
font-size: 50px;
font-weight: bold;
position:relative;
top: -10px;
}
.text-center img{
position:relative;
top: -25px;
}
.text-center p{
font-weight:300;
font-size:25px;
color:black;
}
.btn-md .booking-links{
font-size: 1.2rem;
color: white;
border: 2px solid green;
border-radius: 25%;
padding: 15px 20px;
background-color:#078D75;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.btn-md .booking-links:hover {
background-color: #368E41;
color: black;
text-decoration: none;
}
.btn-md .gallery-links{
font-size: 1.2rem;
color: white;
border: 2px solid green;
border-radius: 25%;
padding: 15px 20px;
background-color:#037BDB;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.1s;
}
.btn-md .gallery-links:hover {
background-color: #008CBA;
color: black;
text-decoration: none;
}
/*------- section one -------*/ <!doctype html>
<html lang="en"><head>
<!-- Required meta tags -->
<title>Clypsdra Barber</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- awesome-font CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header class="topbar">
<nav>
<button href="" class="btn login btn-default d-inline-flex" data-toggle="modal" data-target="#loginModal" ><i class="fa fa-sign-in" style="font-size:24px" value="LOGIN" onclick="BtnPushed()" ></i> Login</button>
<button href="" class=" btn signup d-inline-flex" data-toggle="modal" data-target="#signupModal"><i class="fa fa-user" style="font-size:24px" ></i> Sign Up</button>
</nav>
</header>
<div class="loginbox" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<h1>Sign in</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter username" required>
<p>Password</p>
<input type="password" name="" placeholder="Enter password" required>
<input type="submit" name="" value="Login">
<a href="#">Not a member?</a> <br>
</form>
</div>
<!-- section one content -->
<div style="box-shadow:1px 1px 100px black" class="section1-bg" id="testing">
<div class="text-center">
<img style="max-width:80%; border-radius:20%; border:4px outset black;box-shadow:8px 10px 10px blue" src="images/logoblue.png" height="auto" width="200px" class="mt-5">
<h3 class="display-1 mb-0 responsive-headers">Clypsydra Barbershop</h3>
<p>Quality Cuts with Premium Class</p>
<button type="button" class="btn btn-md "><a class="booking-links" href="booking.php">Booking</a></button>
<button type="button" class="btn btn-md "><a class="gallery-links" href="gallery.html">Gallery</a></button>
</div>
</div>
<!-- End section one content -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script>
var LogModal = document.getElementById = 'LoginModal';
LogModal.setAttribute('display','none');
var Btn = document.getElementsByClassName = 'btn';
function BtnPushed(e){
Btn.addEventListener('click', function(){
LogModal.setAttribute('dispaly','true');
})
}
</script>
</body>
</html>你几乎做对了。
因为#loginModal的位置是固定的，所以.text-center父级必须相对于z-index为-1。
.text-center{
position:relative;
z-index:-1;
}
另一个错误是.topbar设置为5000替换为：
.topbar{
z-index: 300;
}
用按钮替换a标签并调用showModal() JS函数将#loginModal显示从'none'更改为'block'：
<input type="button" style="float:right;margin-top:5px;margin-right:5px;" value="LOGIN" onClick="showModal()"/>
function showModal()
{
document.getElementById("loginModal").style.display = 'block';
}