實作由3個按鈕觸發的3個模態-有解無憂

我有 3 個模式按鈕。所有三個按鈕都有不同的輸入。但是當我按下第一個按鈕時，一切都顯示得很好，但是當我按下第二個和第三個按鈕時，它顯示的結果與第一個按鈕相同。請看一下，我在下面附上我的代碼。

額外：如果你能建議我，我將如何將多張照片堆疊在模態體中而不丟失模態體的形狀，這對我很有幫助。它將在模態正文中顯示一張照片，但如果有人交換圖片，則下一張圖片將到達。太感謝了。

// Modal
// Get DOM Elements
const modal = document.querySelector('#my-modal');
const modalBtn = document.querySelectorAll('.button');
const closeBtn = document.querySelector('.close');

// Events
modalBtn.forEach(btn => btn.addEventListener('click', openModal));
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);

// Open
function openModal() {
  modal.style.display = 'block';
}

// Close
function closeModal() {
  modal.style.display = 'none';
}

// Close If Outside Click
function outsideClick(e) {
  if (e.target == modal) {
    modal.style.display = 'none';
  }
}

/* Modal section styling */

:root {
    --modal-duration: 1s;
    --modal-color: crimson;
  }
  
  .button {
    font-family: 'poppins', sans-serif;
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
  }
  
  .button:hover {
    color: crimson;
    background: none;
  }
  
  .modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal-content {
    margin: 50px auto;
    width: 60%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
  }
  
  .modal-header h2,
  .modal-footer h3 {
    margin: 0;
  }
  
  .modal-header {
    background: var(--modal-color);
    text-align: center;
    padding: 10px;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  
  .modal-body {
    padding: 10px 5px 1px 5px;
    background: #fff;
  }
  
  .modal-footer {
    background: var(--modal-color);
    padding: 10px;
    font-size: 15px;
    font-weight: lighter;
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  .close {
    color: #ccc;
    float: right;
    font-size: 30px;
    color: #fff;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .responsive {
    width: 100%;
    height: auto;
  }
  @keyframes modalopen {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

<!-- Modal Button 1 start -->
<button id="modal-btn" class="button">Parkit</button>
<div id="my-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Vehicle Parking Application</h3>
    </div>
    <div class="modal-body">
      <img src="https://thefinancialexpress.com.bd/uploads/1575560371.jpg" alt="Vehicle Parking Application" class="responsive">
    </div>
    <div class="modal-footer">
      <p>
      Footer
      </p>
    </div>
  </div>
</div>
<!-- Modal Button 1 end -->

<!-- Modal Button 2 start -->
<button id="modal-btn2" class="button">IPDC IMS</button>
<div id="my-modal2" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Asset Management System</h3>
    </div>
    <div class="modal-body">
      <img src="#" alt="Asset Management System" class="responsive">
    </div>
    <div class="modal-footer">
      ...
    </div>
  </div>
</div>
<!-- Modal Button 2 end -->

<!-- Modal Button 3 start -->
<button id="modal-btn3" class="button">Gaming Website</button>
<div id="my-modal3" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Gaming Website</h3>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">

    </div>
  </div>
</div>
<!-- Modal Button 3 end -->

uj5u.com熱心網友回復：

這將解決每個按鈕觸發相同模式的問題。您應該獲得所有模式和所有按鈕。

// Modal
// Get DOM Elements
const modals = document.querySelectorAll(".modal");
const modalBtns = document.querySelectorAll(".button");
const closeBtns = document.querySelectorAll(".close");

// Events
modalBtns.forEach((btn, index) =>
  btn.addEventListener("click", () => openModal(index))
);
closeBtns.forEach((btn, index) =>
  btn.addEventListener("click", () => closeModal(index))
);
// for closing when you click outside
modals.forEach((modal, index) =>
  modal.addEventListener("click", (e) => {
   if(e.target === e.currentTarget){
     closeModal(index);
   }
})
);

// Open
function openModal(index) {
  modals[index].style.display = "block";
}

// Close
function closeModal(index) {
  modals[index].style.display = "none";
}

/* Modal section styling */

:root {
    --modal-duration: 1s;
    --modal-color: crimson;
  }
  
  .button {
    font-family: 'poppins', sans-serif;
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
  }
  
  .button:hover {
    color: crimson;
    background: none;
  }
  
  .modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal-content {
    margin: 50px auto;
    width: 60%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
  }
  
  .modal-header h2,
  .modal-footer h3 {
    margin: 0;
  }
  
  .modal-header {
    background: var(--modal-color);
    text-align: center;
    padding: 10px;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  
  .modal-body {
    padding: 10px 5px 1px 5px;
    background: #fff;
  }
  
  .modal-footer {
    background: var(--modal-color);
    padding: 10px;
    font-size: 15px;
    font-weight: lighter;
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  .close {
    color: #ccc;
    float: right;
    font-size: 30px;
    color: #fff;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .responsive {
    width: 100%;
    height: auto;
  }
  @keyframes modalopen {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

<!-- Modal Button 1 start -->
<button id="modal-btn" class="button">Parkit</button>
<div id="my-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Vehicle Parking Application</h3>
    </div>
    <div class="modal-body">
      <img src="https://thefinancialexpress.com.bd/uploads/1575560371.jpg" alt="Vehicle Parking Application" class="responsive">
    </div>
    <div class="modal-footer">
      <p>
      Footer
      </p>
    </div>
  </div>
</div>
<!-- Modal Button 1 end -->

<!-- Modal Button 2 start -->
<button id="modal-btn2" class="button">IPDC IMS</button>
<div id="my-modal2" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Asset Management System</h3>
    </div>
    <div class="modal-body">
      <img src="#" alt="Asset Management System" class="responsive">
    </div>
    <div class="modal-footer">
      ...
    </div>
  </div>
</div>
<!-- Modal Button 2 end -->

<!-- Modal Button 3 start -->
<button id="modal-btn3" class="button">Gaming Website</button>
<div id="my-modal3" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Gaming Website</h3>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">

    </div>
  </div>
</div>
<!-- Modal Button 3 end -->

對于您想要在模態框內使用滑塊的額外部分，我建議您查看swper.js，這是一個 JavaScript 庫，可讓您輕松設定它。

uj5u.com熱心網友回復：

你的問題對我來說并不完全清楚。根據我的推斷，您在問為什么 3 個按鈕Parkit、IPDC IMS和Gaming Website會打開相同的模式。

這是因為在您的 JS 代碼中，您正在使用其 ID 選擇一個特定的模式。

const modal = document.querySelector('#my-modal');

相反，嘗試使用類名選擇每個模態modal，然后在openModalandcloseModal而不是寫

modal.style.display = 'block';
modal.style.display = 'none';

使用您剛剛創建的模態陣列querySelectorAll并撰寫類似這樣的內容

modal[i].style.display = 'block';
modal[i].style.display = 'none';

uj5u.com熱心網友回復：

問題是您使用document.querySelector它，它只指定第一個元素。

也許可以通過指定按鈕使用索引來嘗試這個，即使你切換順序也能正常作業。

只要你有class='modal'，它就會作業。

// Modal
// Get DOM Elements
const modal = document.querySelector('#my-modal');
const modalBtn = document.querySelectorAll('.button');
const closeBtn = document.querySelectorAll('.close');

// Events
modalBtn.forEach((btn,index) => btn.addEventListener('click', ()=>openModal(index)));
closeBtn.forEach((btn,index) =>btn.addEventListener('click', ()=>closeModal(index)));
window.addEventListener('click', outsideClick);

// Open
function openModal(i) {
  
  document.querySelectorAll('.modal')[i].style.display = 'block';
}

// Close
function closeModal(i) {
   document.querySelectorAll('.modal')[i].style.display = 'none';
}

// Close If Outside Click
function outsideClick(e) {
  if (e.target == modal) {
    modal.style.display = 'none';
  }
}

/* Modal section styling */

:root {
    --modal-duration: 1s;
    --modal-color: crimson;
  }
  
  .button {
    font-family: 'poppins', sans-serif;
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
  }
  
  .button:hover {
    color: crimson;
    background: none;
  }
  
  .modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal-content {
    margin: 50px auto;
    width: 60%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
  }
  
  .modal-header h2,
  .modal-footer h3 {
    margin: 0;
  }
  
  .modal-header {
    background: var(--modal-color);
    text-align: center;
    padding: 10px;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  
  .modal-body {
    padding: 10px 5px 1px 5px;
    background: #fff;
  }
  
  .modal-footer {
    background: var(--modal-color);
    padding: 10px;
    font-size: 15px;
    font-weight: lighter;
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  .close {
    color: #ccc;
    float: right;
    font-size: 30px;
    color: #fff;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .responsive {
    width: 100%;
    height: auto;
  }
  @keyframes modalopen {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

<!-- Modal Button 1 start -->
<button id="modal-btn" class="button">Parkit</button>
<div id="my-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Vehicle Parking Application</h3>
    </div>
    <div class="modal-body">
      <img src="https://thefinancialexpress.com.bd/uploads/1575560371.jpg" alt="Vehicle Parking Application" class="responsive">
    </div>
    <div class="modal-footer">
      <p>
      Footer
      </p>
    </div>
  </div>
</div>
<!-- Modal Button 1 end -->

<!-- Modal Button 2 start -->
<button id="modal-btn2" class="button">IPDC IMS</button>
<div id="my-modal2" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Asset Management System</h3>
    </div>
    <div class="modal-body">
      <img src="#" alt="Asset Management System" class="responsive">
    </div>
    <div class="modal-footer">
      ...
    </div>
  </div>
</div>
<!-- Modal Button 2 end -->

<!-- Modal Button 3 start -->
<button id="modal-btn3" class="button">Gaming Website</button>
<div id="my-modal3" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Gaming Website</h3>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">

    </div>
  </div>
</div>
<!-- Modal Button 3 end -->

uj5u.com熱心網友回復：

我認為這是最簡單的方法。只需使用模態 id 的值向每個按鈕添加一個值。然后保存打開的模型，一切正常。

    var modal = "";
    const modalBtn = document.querySelectorAll('.button');
    const closeBtn = document.querySelectorAll('.close');

    // Events
    modalBtn.forEach(btn => btn.addEventListener('click', openModal));
    closeBtn.forEach(close => close.addEventListener('click', closeModal)); 
    window.addEventListener('click', outsideClick);

    // Open
    function openModal(e) {
        modal = document.querySelector('#'   e.target.value);
        modal.style.display = 'block';
    }

    // Close
    function closeModal() {
        modal.style.display = 'none';
        modal = "";
    }

    // Close If Outside Click
    function outsideClick(e) {
        if (e.target == modal) {
            modal.style.display = 'none';
        }
    }

:root {
    --modal-duration: 1s;
    --modal-color: crimson;
  }
  
  .button {
    font-family: 'poppins', sans-serif;
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
  }
  
  .button:hover {
    color: crimson;
    background: none;
  }
  
  .modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal-content {
    margin: 50px auto;
    width: 60%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
  }
  
  .modal-header h2,
  .modal-footer h3 {
    margin: 0;
  }
  
  .modal-header {
    background: var(--modal-color);
    text-align: center;
    padding: 10px;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  
  .modal-body {
    padding: 10px 5px 1px 5px;
    background: #fff;
  }
  
  .modal-footer {
    background: var(--modal-color);
    padding: 10px;
    font-size: 15px;
    font-weight: lighter;
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  .close {
    color: #ccc;
    float: right;
    font-size: 30px;
    color: #fff;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .responsive {
    width: 100%;
    height: auto;
  }
  @keyframes modalopen {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

   <button id="modal-btn" value="my-modal" class="button">Parkit</button>
    <div id="my-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
            <span class="close">&times;</span>
            <h3>Vehicle Parking Application</h3>
            </div>
            <div class="modal-body">
            <img src="https://thefinancialexpress.com.bd/uploads/1575560371.jpg" alt="Vehicle Parking Application" class="responsive">
            </div>
            <div class="modal-footer">
            <p>
            Footer
            </p>
            </div>
        </div>
    </div>
    <!-- Modal Button 1 end -->

    <!-- Modal Button 2 start -->
    <button id="modal-btn2" value="my-modal2" class="button">IPDC IMS</button>
    <div id="my-modal2" class="modal">
        <div class="modal-content">
            <div class="modal-header">
            <span class="close">&times;</span>
            <h3>Asset Management System</h3>
            </div>
            <div class="modal-body">
            <img src="#" alt="Asset Management System" class="responsive">
            </div>
            <div class="modal-footer">
            ...
            </div>
        </div>
    </div>
    <!-- Modal Button 2 end -->

    <!-- Modal Button 3 start -->
    <button id="modal-btn3" value="my-modal3" class="button">Gaming Website</button>
    <div id="my-modal3" class="modal">
        <div class="modal-content">
            <div class="modal-header">
            <span class="close">&times;</span>
            <h3>Gaming Website</h3>
            </div>
            <div class="modal-body">
            ...
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/428648.html

標籤：javascript html css

上一篇：更改下拉串列后更改頁面HTML

下一篇：我的單詞和div之間怎么能有空格？