个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 06:30:33 24 4
gpt4 key购买 nike

大家好，我是网络开发的新手，

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

我在 CSS 中使用 z-index=4000; 将其置于内容之前，但我不确定这样做是否正确。但是，当加载网页时，该表单仍会自动出现，除非以其他方式单击日志记录按钮，否则不会出现这种情况。

  • 我遇到的另一个小问题是我的注册按钮没有在顶部导航部分的登录按钮旁边排列。它不知何故出现在右侧。

    下面我将提供我目前拥有的 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>

最佳答案

你几乎做对了。
因为 #loginModal 的位置是固定的，所以 .text-center parent 必须相对于 -1 的 z-index 定位。

LIVE DEMO 

.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 - 加载网页时弹出登录问题，显示在我网页上的内容后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54735637/

24 4 0
文章推荐： java - 使用@FindBy查找WebElementS
文章推荐： c - "Correct"使用 GTK 为 g_signal_connect() 进行转换？
文章推荐： 附件的 Javax 邮件文件路径
文章推荐： c - C语言中有没有可以转换十进制数底数的函数？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com