弹出窗口登录
我已经写了一些代码，想要建立一个弹出窗口供用户按下登录按钮时登录。但是，我无法做到这一点，也无法弄清楚代码中的错误。有人可以在这个问题上帮忙吗？非常感谢
下面是html代码：
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/timetabling.css">
<title>Time-tabling system</title>
</head>
<body>
<div id="main">
<div id="header">
<div id="widgetBar">
<div class="button">
<button class="btn login">Login</button>
<div class="popup">
<div class="popup-content">
<img scr="close.png" alt="Close" class="close">
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<a href="#" class="button">Login</a>
</div>
</div>
<script>
document.getElementByID("button").addEventListener("click", function(){
document.querySelector(".popup").style.display = "flex";
})
document.querySelector(".close").addEventListener("click", function(){
document.querySelector(".popup").style.diplay = "none";
})
</script>
</div>
</div>
</div>
<img align="center" src="keep-habbit-tracking.jpg" alt="habbit" width="600" height="300">
<p align="center">Welcome to the time-tabling system!!</p>
<p align="center">This is a place for you to set your time table and schedule your work...</p>
<p align="center">Please login to begin</p>
<div id="footer">
<hr>
<p id="footerText">Group 18 The time tabling system</p>
</div>
</div>
</body>
</html>
下面是CSS代码：
body {
font-family: Arial, Helvetica, sans-serif;
width: 850px;
text-align: center;
margin: 20px auto;
}
#main { background: #eee }
#widgetBar {
height: 50px;
width: 850px;
float: right;
background: #ccc;
}
.btn {
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: small;
float:right;
cursor: pointer;
display: inline-block;
}
.btn:hover {background: #eee;}
.login {color: green;}
.popup{
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: none;
justify-content: center;
align-items: center;
}
.popup-content{
height: 250px;
width: 500px;
background: #fff;
padding: 20px;
border-radius: 5px;
position: relative;
}
input{
margin: 20px auto;
display: block;
width: 50%;
padding: 8px;
border: 1px solid gray;
}
.close{
position: absolute;
top: -15px;
right: -15px;
background: #fff;
height: 20px;
width: 20px;
border-radius: 50%;
box-shadow: 6px 6px 29px -4px rgba(0,0,0,0.75);
cursor: pointer;
}
#footer {
height: 60px;
width: 300px;
font-size: small;
clear: left;
}
这是我运行代码后的页面。但是，当我单击“登录”按钮时，不存在用于用户登录的弹出窗口。
5 个答案:
答案 0 :(得分：2)
注意getElementById最后是小写D。我认为除了querySelector之外，坚持这一点至少是我会做的（如果不使用JQuery）。在正文之后添加您的脚本标签和所有JavaScript。不要将其添加到您的代码中。一段时间后，它变得凌乱且无法阅读。如果您使用的是getElementById('button')，请确保它是一个ID而不是一个类。
document.getElementById("button").addEventListener("click", function(){
document.getElementById("popup").style.display = "flex";
})
document.getElementById("close").addEventListener("click", function(){
document.getElementById("popup").style.diplay = "none";
})body {
font-family: Arial, Helvetica, sans-serif;
width: 850px;
text-align: center;
margin: 20px auto;
}
#main { background: #eee }
#widgetBar {
height: 50px;
width: 850px;
float: right;
background: #ccc;
}
.btn {
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: small;
float:right;
cursor: pointer;
display: inline-block;
}
.btn:hover {background: #eee;}
.login {color: green;}
.popup{
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: none;
justify-content: center;
align-items: center;
}
.popup-content{
height: 250px;
width: 500px;
background: #fff;
padding: 20px;
border-radius: 5px;
position: relative;
}
input{
margin: 20px auto;
display: block;
width: 50%;
padding: 8px;
border: 1px solid gray;
}
.close{
position: absolute;
top: -15px;
right: -15px;
background: #fff;
height: 20px;
width: 20px;
border-radius: 50%;
box-shadow: 6px 6px 29px -4px rgba(0,0,0,0.75);
cursor: pointer;
}
#footer {
height: 60px;
width: 300px;
font-size: small;
clear: left;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/timetabling.css">
<title>Time-tabling system</title>
</head>
<body>
<div id="main">
<div id="header">
<div id="widgetBar">
<div class="button">
<button class="btn login" id="button">Login</button>
<div class="popup" id="popup">
<div class="popup-content">
<img scr="close.png" alt="Close" class="close" id="close">
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<a href="#" class="button">Login</a>
</div>
</div>
</div>
</div>
</div>
<img align="center" src="keep-habbit-tracking.jpg" alt="habbit" width="600" height="300">
<p align="center">Welcome to the time-tabling system!!</p>
<p align="center">This is a place for you to set your time table and schedule your work...</p>
<p align="center">Please login to begin</p>
<div id="footer">
<hr>
<p id="footerText">Group 18 The time tabling system</p>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
这是创建弹出框的最佳示例。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
答案 2 :(得分：0)
d中的getElementByID不正确，您需要使用getElementByID来代替getElementById。这是文档https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
同样，在将style定义为popup时，存在display的拼写错误
以下是代码段：
var btn = document.getElementById("button");
var closeBtn = document.querySelector(".close");
var popupId = document.getElementById("popup");
btn.addEventListener("click", function(){
popupId.style.display = "flex";
})
closeBtn.addEventListener("click", function(){
popupId.style.display = "none";
})body {
font-family: Arial, Helvetica, sans-serif;
width: 850px;
text-align: center;
margin: 20px auto;
}
#main { background: #eee }
#widgetBar {
height: 50px;
width: 850px;
float: right;
background: #ccc;
}
.btn {
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: small;
float:right;
cursor: pointer;
display: inline-block;
}
.btn:hover {background: #eee;}
.login {color: green;}
.popup{
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: none;
justify-content: center;
align-items: center;
}
.popup-content{
height: 250px;
width: 500px;
background: #fff;
padding: 20px;
border-radius: 5px;
position: relative;
}
input{
margin: 20px auto;
display: block;
width: 50%;
padding: 8px;
border: 1px solid gray;
}
.close{
position: absolute;
top: -15px;
right: -15px;
background: #fff;
height: 20px;
width: 20px;
border-radius: 50%;
box-shadow: 6px 6px 29px -4px rgba(0,0,0,0.75);
cursor: pointer;
}
#footer {
height: 60px;
width: 300px;
font-size: small;
clear: left;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/timetabling.css">
<title>Time-tabling system</title>
</head>
<body>
<div id="main">
<div id="header">
<div id="widgetBar">
<div class="button">
<button class="btn login" id="button">Login</button>
<div class="popup" id="popup" style="display:none">
<div class="popup-content">
<img scr="close.png" alt="Close" class="close">
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<a href="#" class="button" >Login</a>
</div>
</div>
</div>
</div>
</div>
<img align="center" src="keep-habbit-tracking.jpg" alt="habbit" width="600" height="300">
<p align="center">Welcome to the time-tabling system!!</p>
<p align="center">This is a place for you to set your time table and schedule your work...</p>
<p align="center">Please login to begin</p>
<div id="footer">
<hr>
<p id="footerText">Group 18 The time tabling system</p>
</div>
</div>
</body>
</html>
答案 3 :(得分：0)
此行：
document.getElementByID("button").addEventListener("click", function(){
更改为：
document.getElementById("login_button").addEventListener("click", function(){
并在登录按钮中添加一个ID：
<button class="btn login" id="login_button">Login</button>
答案 4 :(得分：0)
/*Modal*/
h4 {
font-weight: bold;
color: #fff;
}
.close {
color: #fff;
transform: scale(1.2)
}
.modal-content {
font-weight: bold;
background: linear-gradient(to bottom right,#F87E7B,#B05574);
}
.form-control {
margin: 1em 0;
}
.form-control:hover, .form-control:focus {
box-shadow: none;
border-color: #fff;
}
.username, .password {
border: none;
border-radius: 0;
box-shadow: none;
border-bottom: 2px solid #eee;
padding-left: 0;
font-weight: normal;
background: transparent;
}
.form-control::-webkit-input-placeholder {
color: #eee;
}
.form-control:focus::-webkit-input-placeholder {
font-weight: bold;
color: #fff;
}
.login {
padding: 6px 20px;
border-radius: 20px;
background: none;
border: 2px solid #FAB87F;
color: #FAB87F;
font-weight: bold;
transition: all .5s;
margin-top: 1em;
}
.login:hover {
background: #FAB87F;
color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" href="#" data-target="#login" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="container">
<img align="center" src="keep-habbit-tracking.jpg" alt="habbit" width="600" height="300" style="margin-left:250px;">
<p align="center">Welcome to the time-tabling system!!</p>
<p align="center">This is a place for you to set your time table and schedule your work...</p>
<p align="center">Please login to begin</p>
</div>
<!--MODEL POPUP FOR LOGIN-->
<div id="login" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button data-dismiss="modal" class="close">×</button>
<h4>Login</h4>
<form>
<input type="text" name="username" class="username form-control" placeholder="Username"/>
<input type="password" name="password" class="password form-control" placeholder="password"/>
<center><input class="btn login" type="submit" value="Login" /></center>
</form>
</div>
</div>
</div>
</div>
<!--END MODEL POPUP FOR LOGIN-->
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？