首頁猿問模式未顯示在按鈕單擊上 - 香草...

模式未顯示在按鈕單擊上 - 香草 JavaScript

JavaScript

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

我正在嘗試使用vanilla JS切換模式，但是顯示按鈕不起作用。我希望模式在單擊顯示按鈕時(shí)添加一個(gè)類 - 位于項(xiàng)目框的右下角。顯示類將模態(tài)顯示為 100vhx100vw 框。這是我的代碼：// Variableslet buttonOne = document.getElementById("project-1-button");let modalOne = document.getElementById("project-1-modal");let closeOne = document.getElementById("project-1-close");// Functionsfunction modalOneShow() { modalOne.classList.add("show");}function modalOneRemove() { modalOne.classList.remove("show");}// Event ListenersbuttonOne.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貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超7個(gè)贊

您已添加而不是：onclickclick

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

有關(guān)參考文檔types

應(yīng)按照您的情況進(jìn)行更正：

buttonOne.addEventListener("click", modalOneShow);

反對回復(fù) 2022-09-23

慕森王

TA貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超3個(gè)贊

嘗試更改單擊以單擊事件列表。

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

反對回復(fù) 2022-09-23

撒科打諢

TA貢獻(xiàn)1934條經(jīng)驗(yàn) 獲得超2個(gè)贊

原因已知（“點(diǎn)擊”應(yīng)為“點(diǎn)擊”）。只是為了好玩：使用事件委派和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;

}

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

</div>

<h2>Project 1</h2>

</div>

<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>

反對回復(fù) 2022-09-23