为了账号安全,请及时绑定邮箱和手机立即绑定

模式未显示在按钮单击上 - 香草 JavaScript

模式未显示在按钮单击上 - 香草 JavaScript

守着星空守着你 2022-09-23 16:51:34

我正在尝试使用vanilla JS切换模式,但是显示按钮不起作用。我希望模式在单击显示按钮时添加一个类 - 位于项目框的右下角。显示类将模态显示为 100vhx100vw 框。


这是我的代码:


// Variables


let buttonOne = document.getElementById("project-1-button");

let modalOne = document.getElementById("project-1-modal");

let closeOne = document.getElementById("project-1-close");


// Functions


function modalOneShow() {

  modalOne.classList.add("show");

}


function modalOneRemove() {

  modalOne.classList.remove("show");

}


// Event Listeners


buttonOne.addEventListener("onclick", modalOneShow);

closeOne.addEventListener("onclick", modalOneRemove);

.projects-section {

  height: auto;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}


.projects-container {

  height: 90%;

  width: 90%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  margin: 100px 0;

}


.projects-heading {

  height: auto;

  width: 90%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 30px 0;

}


.project-box {

  height: 400px;

  width: 800px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  background-color: yellow;

}


.project-button {

  height: 10%;

  width: 40%;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  position: absolute;

  bottom: 5px;

  right: 20px;

}


.project-button h4 {

  border-bottom: 1px solid #000;

  cursor: pointer;

}


.project-modal {

  height: 100vh;

  width: 100%;

  align-items: center;

  justify-content: center;

  z-index: 10;

  background-color: #e8ead3;

  position: fixed;

  top: 0;

  left: 0;

}


.project-modal-content {

  height: 90%;

  width: 90%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  position: relative;

}


.project-close {

  height: 40px;

  width: 40px;

  position: absolute;

  top: 0;

  right: 10px;

  cursor: pointer;

}


#project-1-modal {

  display: none;

}

如果有人能为我指出我做错了什么的正确方向,那就太好了。谢谢!


查看完整描述

3 回答

?
三国纷争

TA贡献1503条经验 获得超7个赞

您已添加而不是 :onclickclick

target.addEventListener(type, listener [, options]);

有关参考文档types

应按照您的情况进行更正:

buttonOne.addEventListener("click", modalOneShow);


查看完整回答
反对 回复 6天前
?
慕森王

TA贡献1456条经验 获得超3个赞

尝试更改单击以单击事件列表。

buttonOne.addEventListener("click", modalOneShow);
closeOne.addEventListener("click", modalOneRemove);


查看完整回答
反对 回复 6天前
?
撒科打诨

TA贡献1600条经验 获得超1个赞

原因已知(“点击”应为“点击”)。只是为了好玩:使用事件委派classList.toggle

document.addEventListener("click", toggleModal);


function toggleModal(evt) {

  const originBttn = evt.target.closest("#project-1-button");

  const originModalOpen = evt.target.closest("#project-1-modal");

  

  if (!originBttn && !originModalOpen) { return; }

  

  const modalNode = document.querySelector("#project-1-modal");

  modalNode.classList.toggle("show"); 

}

.projects-section {

  height: auto;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}


.projects-container {

  height: 90%;

  width: 90%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  margin: 100px 0;

}


.projects-heading {

  height: auto;

  width: 90%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 30px 0;

}


.project-box {

  height: 400px;

  width: 800px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  background-color: yellow;

}


.project-button {

  height: 10%;

  width: 40%;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  position: absolute;

  bottom: 5px;

  right: 20px;

}


.project-button h4 {

  border-bottom: 1px solid #000;

  cursor: pointer;

}


.project-modal {

  height: 100vh;

  width: 100%;

  align-items: center;

  justify-content: center;

  z-index: 10;

  background-color: #e8ead3;

  position: fixed;

  top: 0;

  left: 0;

  display: none;

}


.project-modal-content {

  height: 90%;

  width: 90%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  position: relative;

}


.project-close {

  height: 40px;

  width: 40px;

  position: absolute;

  top: 0;

  right: 10px;

  cursor: pointer;

}


#project-1-modal {

  display: none;

}


#project-1-modal.show {

  display: flex;

}

<!-- Projects section -->


    <section class="projects-section">

      <div class="projects-container">

        <div class="projects-heading">

          <h2>I'm working on a few projects right now. Here's a list.</h2>

        </div>


        <!-- Project 1 -->


        <div class="project-box">

          <h2>Project 1</h2>

          <div id="project-1-button" class="project-button">

            <h4>Read More</h4>

          </div>

        </div>


        <div id="project-1-modal" class="project-modal">

          <div class="project-modal-content">

            <h2>Hello, this is an example</h2>

            <p>Lots of really interesting text right here.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <div id="project-1-close" class="project-close">

            <i class="fas fa-times fa-2x"></i>

            </div>

          </div>


        </div>


      <!-- End of Project 1 -->


查看完整回答
反对 回复 6天前
  • 3 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信