如何將使用 html/css 制作的模態添加到我的引導程序網站？

Question

我已經在我的引導程序網站中實現了一個模態，但由於某種原因它不起作用。

因此，它應該在用戶按下按鈕時打開。

它正在處理另一個 html/css 文件，但是一旦我將它添加到這個引導程序中，它就停止工作了。

這是我的模態 html 代碼，來自 index.html（引導程序）：

<!-- Modal  -->
  <div id="myModal">
    <div class="container" id="modalContainer">
    <div class="form-container sign-up-container">
    <form action="#">
    <h1>MMT University</h1>
    <span>Se registre para começar</span>
    <input type="text" placeholder="Usuário" />
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Senha" />
    <input type="password" placeholder="Repita a sua senha" />
    <button name="submit">Registrar</button>
    </form>
    </div>
    <div class="form-container sign-in-container">
    <form action="#">
    <h1>Acessar</h1>
    
    <span>Acesse a MMT University</span>
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Senha" />
    <a href="#">Esqueceu a senha?</a>
    <button>Acessar</button>
    </form>
    </div>
    <div class="overlay-container">
    <div class="overlay">
    <div class="overlay-panel overlay-left">
      <h1>Bem vindo!</h1>
      <p>Para continuar aprendendo, acesse a sua conta!</p>
      <button class="ghost" id="signIn">Sign In</button>
    </div>
    <div class="overlay-panel overlay-right">
      <h1>MMT University!</h1>
      <p>Se registre para entrar na melhor universidade trading do mundo.</p>
      <button class="ghost" id="signUp">Registre-se</button>
    </div>
    </div>
    </div>
    </div>
    </div>
    <script src="main.js"></script>
    <script src="modal.js"></script>

  <main id="main">



    <!-- Modal -->

用於打開模態的按鈕

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                Open modal
              </button>

模態.css

/*-----------------------------------------------------------
# Modal 
-----------------------------------------------------------*/

.wrapper{
  display: flex;
  max-width: 560px;
  width: 100%;
  height: 400px;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.wrapper .left,
.wrapper .right{
  width: 50%;
  height: 100%;
  padding: 30px;
}

.wrapper .left{
  background: #313840;
}

.wrapper .left h3{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fff;
  font-size: 20px;
}

.wrapper .left img{
  display: block;
  width: 220px;
  margin: 25px auto 0;
}

.wrapper .right{
  background: #fff;
}

.wrapper .right .tabs ul{
  text-align: center;
}

.wrapper .right .tabs ul li{
  display: inline-block;
  margin: 5px;
  padding: 5px 10px;
  font-size: 14px;
  color: #494f57;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}

.wrapper .right .tabs ul li.active{
  border-bottom: 2px solid #494f57;
}

.wrapper .right .register,
.wrapper .right .login{
  margin-top: 20px;
}

.wrapper .right .input_field{
  margin-bottom: 15px;
}

.wrapper .right .input_field .input{
  width: 100%;
  padding: 10px 15px;
  border: 0;
  font-size: 12px;
  background: #ecebeb;
}

.wrapper .right .btn{
  margin-top: 20px;
  background: #313840;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: bold;
}

.wrapper .right .btn a{
  color: #fff;
  display: block;
  font-size: 14px;
}

.logo2 {
  width: 100%;
  height: 200px;
}

Modal.js

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

var modal_container  = document.getElementById("modalContainer")
modal_container.style.display = "none";


window.onclick = function (event) {
  console.log(event.target)
  if(event.target.id == "myBtn") {
    modal_container.style.display = "flex"
  }
  else if (modal !== event.target && !modal.contains(event.target)) {
    modal_container.style.display = "none";
  }
}

編輯

這是它的樣子

這是它在我的其他文件中的外觀（我沒有使用引導程序）

Answer 1

在您的按鈕上（打開模態），您需要將按鈕連接到模態。

bootstrap4 的方法是使用按鈕上的屬性。 在您的情況下，請嘗試：

<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

您根本不需要 modal.js 文件。

參考：

https://www.w3schools.com/bootstrap4/bootstrap_ref_js_modal.asp