html - 加载网页时弹出登录表单的问题显示在我网页上的内容后面

问题描述

嗨，伙计们，我是 Web 开发的新手，

我有一个登录按钮，该按钮链接到我网页上的登录表单。加载网页后，我的日志记录表单会弹出并显示在网页内容的后面，而无需单击按钮。

我z-index=4000;在 CSS 中使用过将它放在内容的前面，但我不确定这是否是正确的做法。但是，在加载网页时表单仍然会自动出现，除非单击日志按钮，否则不会出现这种情况。

我遇到的另一个小问题是我的注册按钮没有在顶部导航部分的登录按钮旁边排列。它以某种方式出现在右侧。

下面我将提供我目前所拥有的 CSS 和 HTML。

我在这个问题上花了几天时间，但我无法弄清楚是什么导致了这个问题，您的帮助对于解决这个问题非常重要。非常感谢。

/* ------  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>

标签： htmlcssformsbuttonmodal-dialog

你几乎做对了。
因为的位置#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';
}

html - 加载网页时弹出登录表单的问题显示在我网页上的内容后面

问题描述

解决方案

推荐阅读