Home > Back-end >  Can't open modal window
Can't open modal window

Time：11-12

Hello I have a project for my studies which is to display data on a dashboard that will be more or less modifiable by the user according to his needs.

I'm trying to open a modal window but it doesn't work and i can't figure out where my mistake came from.

const body = document.querySelector("body"),
  sidebar = body.querySelector(".sidebar"),
  btn = body.querySelector("#btn");

btn.addEventListener("click", () => {
  sidebar.classList.toggle("active");
})

const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelector(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))

function toggleModal() {
  modalContainer.classList.toggle("active")
}
body {
  height: 100vh;
  background: var(--body-color);
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 78px;
  background: var(--primary-color);
  padding: 6px 14px;
  transition: all 0.5s ease;
}

.sidebar.active {
  width: 240px
}

.sidebar .logo_content .logo {
  color: #FFF;
  display: flex;
  height: 50px;
  width: 100%;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}

.sidebar.active .logo_content .logo {
  opacity: 1;
  pointer-events: none;
}

.logo_content .logo i {
  font-size: 28px;
  margin-right: 5px;
}

.logo_content .logo .logo_name {
  font-size: 20px;
  font-weight: 400;
}

.sidebar #btn {
  position: absolute;
  color: #FFF;
  top: 6px;
  left: 50%;
  font-size: 20px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  transform: translateX(-50%);
}

.sidebar.active #btn {
  left: 90%;
}

.sidebar ul {
  margin-top: 20px;
}

.sidebar li {
  position: relative;
  height: 50px;
  width: 100%;
  margin: 0 0px;
  list-style: none;
  line-height: 50px;
}

.sidebar li a {
  color: #FFF;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
  border-radius: 12px;
  white-space: nowrap;
}

.sidebar li a:hover {
  color: #11101d;
  background: #FFF;
}

.sidebar li a i {
  height: 50px;
  min-width: 50px;
  border-radius: 12px;
  line-height: 50px;
  text-align: center;
}

.sidebar .links_name {
  opacity: 0;
  pointer-events: none;
}

.sidebar.active .links_name {
  opacity: 1;
  pointer-events: auto;
}

.sidebar .menu-bar {
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home {
  position: relative;
  height: 100vh;
  left: 78px;
  width: calc(100% - 78px);
  background: var(--body-color);
  transition: var(--tran-05);
}

.home .text {
  font-size: 30px;
  font-weight: 500;
  color: var(--text-color);
  padding: 8px 40px;
}

.sidebar.active~.home {
  left: 240px;
  width: calc(100% - 78px);
}

.modal-container {
  display: none;
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.modal-container.active {
  display: flex;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #333333d3;
}

.modal {
  width: 95%;
  border-radius: 5px;
  max-width: 500px;
  min-width: 300px;
  padding: 30px;
  background: #FFF;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close-modal {
  padding: 8px 10px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  background: #ff365e;
  color: #FFF;
}

.modal h1 {
  margin-top: 0px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="stylesheet" href="style.css"> -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
  <div >
    <div >
      <div >
        <i class='bx bx1-c-plus-plus'></i>
        <div >SailVision</div>
      </div>
      <i class='bx bx-menu' id="btn"></i>
    </div>
    <div >
      <ul >
        <li>
          <a href="#">
            <i class='bx bx-windows'></i>
            <span >Dashboard n°1</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-windows'></i>
            <span >Dashboard n°2</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-plus'></i>
            <span >Ajouter</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-customize modal-trigger'></i>
            <span >Template</span>
          </a>
        </li>
      </ul>
      <div >
        <li>
          <a href="#">
            <i class='bx bx-cog'></i>
            <span >Paramètre</span>
          </a>
        </li>
      </div>
    </div>
  </div>
  <div >
    <div >Template n°1</div>
  </div>
  <div >
    <div >
      <div >
        <button >X</button>
        <h1>Choix des templates</h1>
      </div>
    </div>
  </div>
  <!-- <script src="script.js"></script> -->
</body>

CodePudding user response：

It should be working now, remember that querySelector() only grab the first match, you should use querySelectorAll() method instead, that is iterable and grabs all elements that match.

const body = document.querySelector("body"),
  sidebar = body.querySelector(".sidebar"),
  btn = body.querySelector("#btn");

btn.addEventListener("click", () => {
  sidebar.classList.toggle("active");
})

const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))

function toggleModal() {
  modalContainer.classList.toggle("active")
}
body {
  height: 100vh;
  background: var(--body-color);
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 78px;
  background: var(--primary-color);
  padding: 6px 14px;
  transition: all 0.5s ease;
}

.sidebar.active {
  width: 240px
}

.sidebar .logo_content .logo {
  color: #FFF;
  display: flex;
  height: 50px;
  width: 100%;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}

.sidebar.active .logo_content .logo {
  opacity: 1;
  pointer-events: none;
}

.logo_content .logo i {
  font-size: 28px;
  margin-right: 5px;
}

.logo_content .logo .logo_name {
  font-size: 20px;
  font-weight: 400;
}

.sidebar #btn {
  position: absolute;
  color: #FFF;
  top: 6px;
  left: 50%;
  font-size: 20px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  transform: translateX(-50%);
}

.sidebar.active #btn {
  left: 90%;
}

.sidebar ul {
  margin-top: 20px;
}

.sidebar li {
  position: relative;
  height: 50px;
  width: 100%;
  margin: 0 0px;
  list-style: none;
  line-height: 50px;
}

.sidebar li a {
  color: #FFF;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
  border-radius: 12px;
  white-space: nowrap;
}

.sidebar li a:hover {
  color: #11101d;
  background: #FFF;
}

.sidebar li a i {
  height: 50px;
  min-width: 50px;
  border-radius: 12px;
  line-height: 50px;
  text-align: center;
}

.sidebar .links_name {
  opacity: 0;
  pointer-events: none;
}

.sidebar.active .links_name {
  opacity: 1;
  pointer-events: auto;
}

.sidebar .menu-bar {
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home {
  position: relative;
  height: 100vh;
  left: 78px;
  width: calc(100% - 78px);
  background: var(--body-color);
  transition: var(--tran-05);
}

.home .text {
  font-size: 30px;
  font-weight: 500;
  color: var(--text-color);
  padding: 8px 40px;
}

.sidebar.active~.home {
  left: 240px;
  width: calc(100% - 78px);
}

.modal-container {
  display: none;
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.modal-container.active {
  display: flex;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #333333d3;
}

.modal {
  width: 95%;
  border-radius: 5px;
  max-width: 500px;
  min-width: 300px;
  padding: 30px;
  background: #FFF;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close-modal {
  padding: 8px 10px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  background: #ff365e;
  color: #FFF;
}

.modal h1 {
  margin-top: 0px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="stylesheet" href="style.css"> -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
  <div >
    <div >
      <div >
        <i class='bx bx1-c-plus-plus'></i>
        <div >SailVision</div>
      </div>
      <i class='bx bx-menu' id="btn"></i>
    </div>
    <div >
      <ul >
        <li>
          <a href="#">
            <i class='bx bx-windows'></i>
            <span >Dashboard n°1</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-windows'></i>
            <span >Dashboard n°2</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-plus'></i>
            <span >Ajouter</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-customize modal-trigger'></i>
            <span >Template</span>
          </a>
        </li>
      </ul>
      <div >
        <li>
          <a href="#">
            <i class='bx bx-cog'></i>
            <span >Paramètre</span>
          </a>
        </li>
      </div>
    </div>
  </div>
  <div >
    <div >Template n°1</div>
  </div>
  <div >
    <div >
      <div >
        <button >X</button>
        <h1>Choix des templates</h1>
      </div>
    </div>
  </div>
  <!-- <script src="script.js"></script> -->
</body>

Page link：https//www.codepudding.com/Backend/607042.html

Prev:Axios in NodeJs, " Cannot use import statement outside a module"
Next:How to copy contents of list items from one list to another
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding