創建模態框后按鈕不起作用

Question

我正在做一個項目，我需要向它添加一個模態，在創建我的模態之前，按鈕工作正常並且功能執行正常，但是在創建模態之后，只有模態按鈕在工作，並且頁面按鈕沒有't，我嘗試刪除模態的 html 並且它們工作正常（這就是我理解問題出在模態的方式），我也嘗試刪除覆蓋但沒有任何改變。 我剛剛嘗試刪除模態和覆蓋的 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 並且它工作正常，所以可能有問題？

這是模態的代碼：

 //modal part const modal = document.querySelector('.modal'); const overlay = document.querySelector('#overlay'); const closeModalBtn = document.querySelector('.close-btn'); const backProjectBtn = document.querySelector('.join-btn'); const selectRewardBtn = document.querySelector('.select-reward-btn'); backProjectBtn.addEventListener('click', openModal) function openModal(){ modal.classList.add('active'); overlay.classList.add('active'); } closeModalBtn.addEventListener('click', closeModal); function closeModal(){ modal.classList.remove('active'); overlay.classList.remove('active'); }

 /* modal styling*/.modal{ background: white; border: 1px solid white; border-radius: 15px; padding: 30px; width: 60%; position: absolute; top: 170px; z-index: 10; opacity: 0; }.modal.active{ opacity: 1; }.modal-header{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; } #overlay{ background: hsla(0, 0%, 48%, 0.5); position: fixed; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; } #overlay.active{ opacity: 1; pointer-events: none; }.close-btn{ background: none; font-size: 2rem; font-weight: bolder; border: none; cursor: pointer; }.pledging-block{ display: flex; flex-direction: row; align-items: flex-start; width: 90%; border: 0.5px solid hsl(0, 0%, 80%); border-radius: 15px; margin-top: 30px; margin-bottom: 30px; padding: 20px; } span{ font-weight: lighter; color: hsl(176, 50%, 47%); margin-left: 5px; font-size: 1.1rem; }.header-infos-mahogany{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; }.title{ font-weight: bolder; font-size: 1.5rem; }.money-block{ border-top: 0.5px solid hsl(0, 0%, 80%); display: flex; flex-direction: row; justify-content: space-between; align-items: center; opacity: 0; }.infos-mahogany-pladging,.black-pledging-radio{ display: flex; flex-direction: column; }.left{ display: flex; flex-direction: row; justify-content: center; align-items: center; }.header-infos-bamboo,.header-infos-black,.header-infos-mahogany{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; }.enter-value{ width: 25%; border: hsl(176, 50%, 47%) 1px solid; border-radius: 25px; font-size: 1.3rem; padding-top: 7px; padding-bottom: 7px; }.radio-label{ width: 25px; height: 25px; border: 1px solid hsl(176, 50%, 47%); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; }.radio-label.checkmark{ width: calc(100% - 5%); height: calc(100% - 5%); background-color: hsl(176, 50%, 47%); border-radius: 50%; display: none; }.radio-label input{ display: none; }.radio-label input:checked +.checkmark{ display: inline-block; }.label-part{ width: 10%; }.mahogany-pledging{ opacity: 0.5; pointer-events: none; }

 <div class="interactive-div"> <button class="joinbtn">Backthisproject</button> <button class="bookmark-btn"><img src="images/icon-bookmark.svg" class="bookmark-icon"><div class="text">Bookmark</div></button> </div> <div class="modal" > <div class="modal-header"> <h1>Back this project </h1> <button class="close-btn">&times;</button> </div> <p>Want to support us in bringing Mastercraft Bamboo Monitor Riser out in the world?</p> <div class="no-reward-pledging pledging-block"> <div class="label-part"> <label class="radio-label"> <input type="radio" id="no-reward-pledging-radio" name="radio"> <span class="checkmark"></span> </label> </div> <div class="infos-no-reward"> <div class="title">Plegde with no reward</div> <p>Choose to support us without a reward if you simply believe in our project. As a backer, you will be signed up to receive product updates via email.</p> <div class="money-block"> <p>Enter your plegde</p> <div class="entering-money"> <input type="number" class="enter-value"> <button class="continue-btn">Continue</button> </div> </div> </div> </div> <div class="bamboo-pledging pledging-block"> <div class="label-part"> <label class="radio-label"> <input type="radio" id="no-reward-pledging-radio" name="radio"> <span class="checkmark"></span> </label> </div> <div class="infos-bamboo-pladging"> <div class="header-infos-bamboo"> <div class="title">Bamboo Stand <span> Pledge $25 or more</span></div> <div class="left"> <div class="num-left">101</div> <p class="left">left</p> </div> </div> <p>You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list..</p> <div class="money-block"> <p>Enter your plegde</p> <div class="entering-money"> <input type="number" class="enter-value"> <button class="continue-btn">Continue</button> </div> </div> </div> </div> < -- I removed some elements as they are almost identical -->

我刪除了一些元素，因為它們幾乎相同

Answer 1

我通過更改我的模態的 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 解決了這個問題

.modal{
background: white;
border: 1px solid white;
border-radius: 15px;
padding: 30px;
width: 60%;
position: absolute;
top: 100%;
left: 50%;
z-index: 10;
transform: translate(-50%, -50%) scale(0);
}

.modal.active{
transform: translate(-50%, -50%) scale(1);
}