Home > Back-end >  Implementing 3 modals triggered by 3 buttons
Implementing 3 modals triggered by 3 buttons

Time：02-20

I have 3 modal buttons. All three buttons have different inputs. But when I press the first button, everything is showing completely fine but when I press the 2nd and 3rd button, it shows the same results as the first button. Please have a look, I am attaching my code below.

Extra: It would be very helpful for me if you can suggest me, how I can put multiple photos stacked in the modal body without losing the shape of the modal. It will show a single photo in the modal body but if someone swap over the picture then the next picture will arrive. Thank you so much.

// 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" >Parkit</button>
<div id="my-modal" >
  <div >
    <div >
      <span >&times;</span>
      <h3>Vehicle Parking Application</h3>
    </div>
    <div >
      <img src="https://thefinancialexpress.com.bd/uploads/1575560371.jpg" alt="Vehicle Parking Application" >
    </div>
    <div >
      <p>
      Footer
      </p>
    </div>
  </div>
</div>
<!-- Modal Button 1 end -->

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

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

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

CodePudding user response：

This would solve the problem where every button triggering the same modal. You should be getting all modals and all buttons.

// 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" >Parkit</button>
<div id="my-modal" >
  <div >
    <div >
      <span >&times;</span>
      <h3>Vehicle Parking Application</h3>
    </div>
    <div >
      <img src="https://thefinancialexpress.com.bd/uploads/1575560371.jpg" alt="Vehicle Parking Application" >
    </div>
    <div >
      <p>
      Footer
      </p>
    </div>
  </div>
</div>
<!-- Modal Button 1 end -->

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

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

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

For the extra part where you want a slider inside your modals, I would suggest you to look at swper.js, a JavaScript library that will allow you to set it up easily.

CodePudding user response：

Your question is not completely clear to me. From what I infer, you are asking why the 3 buttons Parkit, IPDC IMS, and Gaming Website open the same modal.

That is because in your JS code, you're selecting one specific modal using its ID.

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

Instead, try selecting every modal using the class name modal and then in the openModal and closeModal instead of writing

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

Use the modal array you just created using querySelectorAll and write something like this

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

CodePudding user response：

The problem is you use document.querySelector and it only specify the first element.

Maybe try this one by specify the button use index which will make it work even you switch the order.

As long as you have the class='modal', it will work.

// 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" >Parkit</button>
<div id="my-modal" >
  <div >
    <div >
      <span >&times;</span>
      <h3>Vehicle Parking Application</h3>
    </div>
    <div >
      <img src="https://thefinancialexpress.com.bd/uploads/1575560371.jpg" alt="Vehicle Parking Application" >
    </div>
    <div >
      <p>
      Footer
      </p>
    </div>
  </div>
</div>
<!-- Modal Button 1 end -->

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

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

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

CodePudding user response：

I thinks this is the easy way to do it. Just add a value to each button with the value of the modal id. Then save the opened model and everything works normaly.

    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" >Parkit</button>
    <div id="my-modal" >
        <div >
            <div >
            <span >&times;</span>
            <h3>Vehicle Parking Application</h3>
            </div>
            <div >
            <img src="https://thefinancialexpress.com.bd/uploads/1575560371.jpg" alt="Vehicle Parking Application" >
            </div>
            <div >
            <p>
            Footer
            </p>
            </div>
        </div>
    </div>
    <!-- Modal Button 1 end -->

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

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

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

Page link：https//www.codepudding.com/Backend/308036.html

Prev:body tag is overflowing , not fitting with container
Next:how can I have space between my word and div?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding