css 我不明白为什么我的弹出窗口不起作用

9nvpjoqh 于 2023-02-14 发布在其他

关注(0)|答案(2)|浏览(168)

所以我目前正在做一个个人项目，但无法让我的模态出现在浏览器中。我试着研究它，但我得到了相同的答案，我目前正在申请回来。

const open1 = document.getElementById('open1');
const modal_container = document.getElementById('modal_container');
const close1 = document.getElementById('close1');

open1.addEventListener('click', () => {
    modal_container.classList.add('show');
});

close1.addEventListener('click', () => {
    modal_container.classList.remove('show');
});

div.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

.real45 {
    background-color: #BC6C25;
    border: 0;
    border-radius: 25px;
    color: #fff;
    padding: 10px 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.real45:hover {
    color: black;
}

.modal {
    background-color: #fff;
    width: 600px;
    max-width: 100%;
    padding: 30px;
    border-style: solid;
    border-radius: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
}

.modal h1 {
    margin: 0;
}

.modal p {
    opacity: 0.7;
}

.modal-container.show {
    opacity: 1;
    pointer-events: 1;
}

<button class="real45" id="open1"> Open Me </button>
  
<div class="modal-container" id="modal_container">
  <div class="modal">
    <h1> Modals are cool </h1>
    <p> practice text </p>
    <button class="real45" id="close1"> Close Me </button>
  </div>
</div>

请任何和所有的建议是受欢迎的，我非常感谢.

css

来源：https://stackoverflow.com/questions/75368602/i-dont-understand-why-my-pop-up-isnt-working

2条答案

按热度按时间

xpszyzbs1#

当您将pointer-events: none;放在.modal-container上时，所有子节点也将继承该属性，这将禁用所有指针事件（单击、拖动、悬停等）。
因此，当您试图通过单击按钮关闭模态时，不会发生任何事情。
我已经将pointer-events: auto;添加到.modal中，以便这些事件可以用于子节点，并且您可以关闭模态。

const open1 = document.getElementById('open1');
const modal_container = document.getElementById('modal_container');
const close1 = document.getElementById('close1');

open1.addEventListener('click', () => {
  modal_container.classList.add('show');
});

close1.addEventListener('click', () => {
  modal_container.classList.remove('show');
});

div.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.real45 {
  background-color: #BC6C25;
  border: 0;
  border-radius: 25px;
  color: #fff;
  padding: 10px 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.real45:hover {
  color: black;
}

.modal {
  background-color: #fff;
  width: 600px;
  max-width: 100%;
  padding: 30px;
  border-style: solid;
  border-radius: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
  pointer-events: auto;
}

.modal h1 {
  margin: 0;
}

.modal p {
  opacity: 0.7;
}

.modal-container.show {
  opacity: 1;
  pointer-events: 1;
}

<button id="open1">open
</button>

<div class="modal-container" id="modal_container">
  <div class="modal">
    <h1> Modals are cool </h1>
    <p> practice text </p>
    <button class="real45" id="close1"> Close Me </button>
  </div>
</div>

赞(0）回复(0）举报 2023-02-14

pgpifvop2#

我需要在我的<button>和<div>标签下面添加我的<script>。这是使它在浏览器中工作的正确方法。

<!DOCTYPE.html>
    
    <html>
    
    <head>
        <link rel="stylesheet" href="stylesheet.css">
        <title> WORK </title>
    </head>
    
    <body>
      
    <button class="real45" id="open1"> Open Me </button>
    
    <div class="modal-container" id="modal_container">
      <div class="modal">
        <h1> Modals are cool </h1>
        <p> practice text </p>
        <button class="real45" id="close1"> Exit </button>
      </div>
    </div>
    
        <script>
            const open1 = document.getElementById("open1");
            const modal_container = document.getElementById("modal_container");
            const close1 = document.getElementById("close1");
    
            open1.addEventListener("click", () => {
                modal_container.classList.add("show");
            });
    
            close1.addEventListener("click", () => {
                modal_container.classList.remove("show");
            });
        </script>
    
    </body>

</html>

赞(0）回复(0）举报 2023-02-14

我来回答

css 我不明白为什么我的弹出窗口不起作用

2条答案

相关问题

热门标签

最新问答