javascript - How to have multiple buttons of same id value and when click on any button the pop-up should come?

Javascript - How to have multiple buttons of same id value and when click on any button the pop-up should come?

It's generally not recommended to have multiple elements with the same id value in HTML, as id should be unique within a page. Instead, you can use the class attribute for multiple elements that share the same behavior. Here's an example of how you can have multiple buttons with the same class and show a pop-up when any of them is clicked:

HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #fff; border: 1px solid #ccc; z-index: 1000; } </style> <title>Multiple Buttons Popup</title> </head> <body> <button class="popup-trigger">Open Popup 1</button> <button class="popup-trigger">Open Popup 2</button> <button class="popup-trigger">Open Popup 3</button> <div id="popup1" class="popup"> Popup Content 1 <button class="close-popup">Close</button> </div> <div id="popup2" class="popup"> Popup Content 2 <button class="close-popup">Close</button> </div> <div id="popup3" class="popup"> Popup Content 3 <button class="close-popup">Close</button> </div> <script> document.addEventListener('DOMContentLoaded', () => { const popupTriggers = document.querySelectorAll('.popup-trigger'); const closeButtons = document.querySelectorAll('.close-popup'); const popups = document.querySelectorAll('.popup'); popupTriggers.forEach((trigger, index) => { trigger.addEventListener('click', () => { popups[index].style.display = 'block'; }); }); closeButtons.forEach((closeButton, index) => { closeButton.addEventListener('click', () => { popups[index].style.display = 'none'; }); }); }); </script> </body> </html>

In this example, each button has the class popup-trigger, and each corresponding pop-up has a unique ID (popup1, popup2, etc.). The JavaScript code handles the click events on the buttons and shows the corresponding pop-up by setting its display style property to 'block'. The close buttons inside each pop-up hide the pop-up by setting its display to 'none'.

Examples

  1. "JavaScript multiple buttons same class pop-up"

    • Description: General search for handling multiple buttons with the same class to show a pop-up on click.
    • Code:
      <!-- In your HTML file --> <button class="popup-btn">Button 1</button> <button class="popup-btn">Button 2</button> <div class="popup" style="display: none;">Popup content</div> 
      // In your JavaScript file document.addEventListener('DOMContentLoaded', function () { const buttons = document.querySelectorAll('.popup-btn'); const popup = document.querySelector('.popup'); buttons.forEach(button => { button.addEventListener('click', function () { popup.style.display = 'block'; }); }); });

  2. "Show pop-up on button click JavaScript"

    • Description: Focusing on displaying a pop-up when a button is clicked, regardless of the button's class.
    • Code:
      <!-- In your HTML file --> <button class="popup-btn">Button 1</button> <button class="popup-btn">Button 2</button> <div class="popup" style="display: none;">Popup content</div> 
      // In your JavaScript file document.addEventListener('DOMContentLoaded', function () { const buttons = document.querySelectorAll('.popup-btn'); const popup = document.querySelector('.popup'); buttons.forEach(button => { button.addEventListener('click', function () { popup.style.display = 'block'; }); }); });

  3. "JavaScript dynamic pop-up for multiple buttons"

    • Description: Searching for a solution to dynamically create pop-ups for multiple buttons with the same class.
    • Code:
      <!-- In your HTML file --> <button class="popup-btn" data-popup-id="popup1">Button 1</button> <button class="popup-btn" data-popup-id="popup2">Button 2</button> <div class="popup" id="popup1" style="display: none;">Popup content for Button 1</div> <div class="popup" id="popup2" style="display: none;">Popup content for Button 2</div> 
      // In your JavaScript file document.addEventListener('DOMContentLoaded', function () { const buttons = document.querySelectorAll('.popup-btn'); buttons.forEach(button => { button.addEventListener('click', function () { const popupId = button.dataset.popupId; const popup = document.getElementById(popupId); popup.style.display = 'block'; }); }); });

  4. "JavaScript modal for multiple buttons"

    • Description: Looking for a modal solution that can be triggered by multiple buttons with the same class.
    • Code:
      <!-- In your HTML file --> <button class="modal-btn">Button 1</button> <button class="modal-btn">Button 2</button> <div class="modal" style="display: none;">Modal content</div> 
      // In your JavaScript file document.addEventListener('DOMContentLoaded', function () { const buttons = document.querySelectorAll('.modal-btn'); const modal = document.querySelector('.modal'); buttons.forEach(button => { button.addEventListener('click', function () { modal.style.display = 'block'; }); }); });

  5. "Dynamic pop-up content for multiple buttons JavaScript"

    • Description: Seeking a solution to dynamically change pop-up content based on the button clicked.
    • Code:
      <!-- In your HTML file --> <button class="popup-btn" data-popup-content="Content 1">Button 1</button> <button class="popup-btn" data-popup-content="Content 2">Button 2</button> <div class="popup" style="display: none;">Default Popup content</div> 
      // In your JavaScript file document.addEventListener('DOMContentLoaded', function () { const buttons = document.querySelectorAll('.popup-btn'); const popup = document.querySelector('.popup'); buttons.forEach(button => { button.addEventListener('click', function () { const popupContent = button.dataset.popupContent; popup.textContent = popupContent; popup.style.display = 'block'; }); }); });

  6. "JavaScript pop-up with animation for multiple buttons"

    • Description: Looking for ways to add animation effects to the pop-up when triggered by multiple buttons.
    • Code:
      <!-- In your HTML file --> <button class="animated-popup-btn">Button 1</button> <button class="animated-popup-btn">Button 2</button> <div class="animated-popup" style="display: none;">Animated Popup content</div> 
      // In your JavaScript file document.addEventListener('DOMContentLoaded', function () { const buttons = document.querySelectorAll('.animated-popup-btn'); const popup = document.querySelector('.animated-popup'); buttons.forEach(button => { button.addEventListener('click', function () { popup.style.display = 'block'; // Add animation logic here }); }); });

  7. "JavaScript pop-up with close button for multiple buttons"

    • Description: Searching for solutions to close the pop-up and handle multiple buttons triggering it.
    • Code:
      <!-- In your HTML file --> <button class="closeable-popup-btn">Button 1</button> <button class="closeable-popup-btn">Button 2</button> <div class="closeable-popup" style="display: none;"> <span class="close-btn">&times;</span> Closeable Popup content </div> 
      // In your JavaScript file document.addEventListener('DOMContentLoaded', function () { const buttons = document.querySelectorAll('.closeable-popup-btn'); const popup = document.querySelector('.closeable-popup'); const closeBtn = popup.querySelector('.close-btn'); buttons.forEach(button => { button.addEventListener('click', function () { popup.style.display = 'block'; }); }); closeBtn.addEventListener('click', function () { popup.style.display = 'none'; }); });

  8. "JavaScript pop-up with fade effect for multiple buttons"

    • Description: Exploring ways to add a fade effect to the pop-up triggered by multiple buttons.
    • Code:
      <!-- In your HTML file --> <button class="fade-popup-btn">Button 1</button> <button class="fade-popup-btn">Button 2</button> <div class="fade-popup" style="opacity: 0; display: none;">Fade Popup content</div> 
      // In your JavaScript file document.addEventListener('DOMContentLoaded', function () { const buttons = document.querySelectorAll('.fade-popup-btn'); const popup = document.querySelector('.fade-popup'); buttons.forEach(button => { button.addEventListener('click', function () { popup.style.display = 'block'; setTimeout(() => { popup.style.opacity = '1'; }, 10); }); }); });

  9. "JavaScript pop-up with multiple animations for buttons"

    • Description: Seeking a solution to implement multiple animations when triggering the pop-up.
    • Code:
      <!-- In your HTML file --> <button class="multiple-animation-btn">Button 1</button> <button class="multiple-animation-btn">Button 2</button> <div class="multiple-animation-popup" style="opacity: 0; transform: scale(0.5); display: none;"> Multiple Animation Popup content </div> 
      // In your JavaScript file document.addEventListener('DOMContentLoaded', function () { const buttons = document.querySelectorAll('.multiple-animation-btn'); const popup = document.querySelector('.multiple-animation-popup'); buttons.forEach(button => { button.addEventListener('click', function () { popup.style.display = 'block'; setTimeout(() => { popup.style.opacity = '1'; popup.style.transform = 'scale(1)'; }, 10); }); }); });

  10. "JavaScript pop-up with dynamic content on button click"

    • Description: Looking for a solution to dynamically change the pop-up content based on the button clicked.
    • Code:
      <!-- In your HTML file --> <button class="dynamic-content-btn" data-popup-content="Content 1">Button 1</button> <button class="dynamic-content-btn" data-popup-content="Content 2">Button 2</button> <div class="dynamic-content-popup" style="display: none;">Default Popup content</div> 
      // In your JavaScript file document.addEventListener('DOMContentLoaded', function () { const buttons = document.querySelectorAll('.dynamic-content-btn'); const popup = document.querySelector('.dynamic-content-popup'); buttons.forEach(button => { button.addEventListener('click', function () { const popupContent = button.dataset.popupContent; popup.textContent = popupContent; popup.style.display = 'block'; }); }); });

More Tags

bitcoin keyword-argument postgresql-8.4 uft14 cardlayout mkv validation unsigned conda session-variables

More Programming Questions

More Chemistry Calculators

More Weather Calculators

More Statistics Calculators

More Transportation Calculators