Javascript 我如何从这个表单中生成一个模态？

我已经开发了一个表单，我希望它被隐藏，当用户按下按钮时，它就会打开。我正在使用html/css和js。我已经把它建立在一个单独的文件夹上，想把它添加到一个现有的文件夹中。我想把表格放在另一页的上面。 所以你可以看一眼我在做什么，这是我表格的视频， 现在，我希望该表单开始隐藏并在单击按钮时打开

这是我的密码

MMT大学
帕拉科马尔登记处
登记员
阿塞萨尔
阿塞斯MMT大学
阿塞萨尔
本姆·文多！
这是一个连续的过程，一个简单的过程

登录
MMT大学！
在蒙多贸易大学注册

注册se
阿塞萨尔

这是我的css：

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
    box-sizing: border-box;
}

body {
    background: #f6f5f7;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    margin: -20px 0 50px;
}


h1 {
    font-weight: bold;
    margin: 0;
  margin-bottom: 5vh;
}

h2 {
    text-align: center;
}

p {
    font-size: 14px;
    font-weight: 100;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 20px 0 30px;
}

span {
    font-size: 12px;
}

a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0;
}

button {
    border-radius: 20px;
    border: 1px solid rgb(220,52,52);
    background-color: rgb(220,52,52);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}

button:active {
    transform: scale(0.95);
}

button:focus {
    outline: none;
}

button.ghost {
    background-color: transparent;
    border-color: #FFFFFF;
  color: #fff;
  background-color: rgb(220,52,52);
}

form {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    text-align: center;
  overflow: auto;
}

input {
    background-color: #eee;
    border: none;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
}

.container {
    background-color: #fff;
    border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.22);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
}

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

.sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}

@keyframes show {
    0%, 49.99% {
        opacity: 0;
        z-index: 1;
    }

    50%, 100% {
        opacity: 1;
        z-index: 5;
    }
}
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}
.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container.right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay {
    background:  #05031b;
    background: -webkit-linear-gradient(to right, #05031b, #05031b);
    background: linear-gradient(to right, #05031b, #05031b);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left {
    transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

.container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

.social-container {
    margin: 20px 0;
}

.social-container a {
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}

这是我从互联网上复制的一个文件，为了遵循这些ID，我管理了一些按钮。 （文件名为modal.js，这是我在那里导入的脚本。）（main.js是表单的动画）

Javascript文件modal.js

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 on 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";
  }
}

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=“无”；
}
}

您应该注意以下几点：

在HTML中，在定义

myBtn

之前加载

modal.js

：

...
</div>
</div>
<script src="main.js"></script> 
<script src="modal.js"></script> <--- Loading modal.js

<button href="#ex1" rel="modal:open" id="myBtn">Acessar</button> <--- defining myBtn

…现在还不存在

因此，您可能应该在文档的头部（在

标记之间）或末尾加载

modal.js

，以避免这些问题

将id

myModal

添加到容器中后，可能会在不单击按钮的情况下加载模态。那是因为它从未被隐藏过。您需要通过JS或CSS隐藏它。下面是一个JS示例（您只需将显示设置为无）：

现在，在单击按钮之前，它不会显示。但要在单击外部时隐藏它，需要检查单击的位置是否（1）为模态，以及（2）为模态。这相对容易：

window.onclick = function (event) {
  if (modal !== event.target && !modal.contains(event.target)) { // Evaluates to true if the modal is not the clicked element and the
    modal.style.display = "none";                                // modal does not contain the clicked element
    btn.style.display = 'block'
  }
}

但这是您目前拥有的：

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

这是检查单击的元素是否为模态，如果是，则关闭它。这不是您想要的，因此请使用前面的示例

--

您还可以将打开模态的代码添加到此侦听器中，从而简化整个代码（modal.js的完整代码）：

---

如果您在使用此解决方案时遇到任何问题，请告诉我。

将要作为模态的元素的

id

设置为

myModal

，并且它应该可以工作感谢您的回答，我已经尝试过了，我已将容器divs id更改为该id。由于某些原因，它仍然会打开，当我在窗体外的任何位置按下时，都不会发生任何事情。请清除缓存。另外，如果您的

myModal

id元素位于JavaScript下方，而未使用

load

事件，则不会定义它。我会把你所有的JavaScript都放在你的脑子里，然后使用加载事件。@Tomas_Mota-看看我的答案，它会帮助你工作的！！！！非常感谢你，伙计！！！祝你一天过得愉快，我还有一个问题，我如何把这个添加到我的另一个文件中？如果你能看一下的话，我已经添加了一个具体的问题。@Tomas_Mota-当然，今天晚些时候我会看一看，（不确定你在哪个时区，但我现在是早上），当我有机会的时候。谢谢你，我的朋友，我来自葡萄牙，现在是下午2点。嗯，只要你能。祝你过得愉快

window.onclick = function (event) {
  if (modal !== event.target && !modal.contains(event.target)) { // Evaluates to true if the modal is not the clicked element and the
    modal.style.display = "none";                                // modal does not contain the clicked element
    btn.style.display = 'block'
  }
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

// Get the modal
var modal = document.getElementById("myModal");
modal.style.display = "none";

// Get the button that opens the modal
var btn = document.getElementById("myBtn");


// Handle clicks
window.onclick = function (event) {
  if(event.target.id == "myBtn") { // If the button is clicked, open the modal and hide the "open the modal" button
    modal.style.display = "block";
    btn.style.display = 'none'
  }
  else if (modal !== event.target && !modal.contains(event.target)) { // If the click is outside the modal, hide the modal and show the "open the modal" button
    modal.style.display = "none";
    btn.style.display = 'block'
  }
}