Fatal编程技术网

Javascript 要登录的弹出窗口

javascript html css

Javascript 要登录的弹出窗口,javascript,html,css,Javascript,Html,Css,我已经写了一些代码，并希望建立一个弹出窗口，用户登录时，他们按下登录按钮。但是，我不能这样做，也不能找出代码中的错误。有人能帮忙解决这个问题吗？非常感谢 以下是html代码： <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conten

我已经写了一些代码，并希望建立一个弹出窗口，用户登录时，他们按下登录按钮。但是，我不能这样做，也不能找出代码中的错误。有人能帮忙解决这个问题吗？非常感谢

以下是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>
这是我运行代码后应该显示的页面。但当我点击登录按钮时，弹出窗口不存在，用户无法登录。

需要注意的是
getElementById
末尾是小写的D。我认为，除了
querySelector
之外，至少我会坚持这样做（如果不使用JQuery）。在正文后添加脚本标记和所有javascript。不要将其添加到代码中。一段时间后，它变得凌乱不堪，无法阅读。如果您使用的是
getElementById（'button'）
请确保它是一个ID而不是一个类

document.getElementById（“按钮”）.addEventListener（“单击”，函数）（）{
document.getElementById（“弹出”）.style.display=“flex”；
})
document.getElementById（“close”）.addEventListener（“单击”，函数）（）{
document.getElementById（“弹出”）.style.diplay=“无”；
})
正文{
字体系列：Arial、Helvetica、无衬线字体；
宽度：850px；
文本对齐：居中；
保证金：20px自动；
}
#主要{背景：#eee}
#威吉巴{
高度：50px；
宽度：850px；
浮动：对；
背景：#ccc；
}
.btn{
边界：无；
背景色：继承；
填充：14px28px；
字体大小：小；
浮动：对；
光标：指针；
显示：内联块；
}
.btn:hover{background:#eee；}
.login{color:green；}
.弹出窗口{
背景：rgba（0,0,0,0.6）；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
显示：无；
证明内容：中心；
对齐项目：居中；
}
.弹出内容{
高度：250px；
宽度：500px；
背景：#fff；
填充：20px；
边界半径：5px；
位置：相对位置；
}
输入{
保证金：20px自动；
显示：块；
宽度：50%；
填充：8px；
边框：1px纯色灰色；
}
.结束{
位置：绝对位置；
顶部：-15px；
右图：-15px；
背景：#fff；
高度：20px；
宽度：20px；
边界半径：50%；
盒影：6px 6px 29px-4px rgba（0,0,0,0.75）；
光标：指针；
}
#页脚{
高度：60px；
宽度：300px；
字体大小：小；
清除：左；
}

时间表系统
登录

欢迎使用时间表系统


这是您设置时间表和安排工作的地方


请登录开始



第18组时间表系统
这里是创建弹出框的最佳示例

<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">&times;</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>



正文{字体系列：Arial，Helvetica，无衬线；}
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：80%；
}
/*关闭按钮*/
.结束{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
模态示例
开放模态
&时代；
模态中的一些文本

//获取模态
var modal=document.getElementById（“myModal”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
在
getElementByID
中，
d
不正确，而不是
getElementByID
您需要使用
getElementByID
。这是文件 另外，在将
样式
定义为
弹出窗口
时，出现了
显示

这里有一个片段：

var btn=document.getElementById（“按钮”）；
var closeBtn=document.querySelector（“.close”）；
var popupId=document.getElementById（“弹出”）；
btn.addEventListener（“单击”，函数（）{
popupId.style.display=“flex”；
}) 
closeBtn.addEventListener（“单击”，函数（）{
popupId.style.display=“无”；
})
正文{
字体系列：Arial、Helvetica、无衬线字体；
宽度：850px；
文本对齐：居中；
保证金：20px自动；
}
#主要{背景：#eee}
#威吉巴{
高度：50px；
宽度：850px；
浮动：对；
背景：#ccc；
}
.btn{
边界：无；
背景色：继承；
填充：14px28px；
字体大小：小；
浮动：对；
光标：指针；
显示：内联块；
}
.btn:hover{background:#eee；}
.login{color:green；}
.弹出窗口{
背景：rgba（0,0,0,0.6）；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
显示：无；
证明内容：中心；
对齐项目：居中；
}
.弹出内容{
高度：250px；
宽度：500px；

<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">&times;</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>




document.getElementByID("button").addEventListener("click", function(){



document.getElementById("login_button").addEventListener("click", function(){



<button class="btn login" id="login_button">Login</button>