Ways to incorporate several modals into your interface

Question

Ways to incorporate several modals into your interface

There are 2 modals on my website, but when I click on the second modal labeled "Mouthoff," it displays the contents of the Subscribe modal instead. I want each modal to display different content.

I have searched on various platforms including here and YouTube, but I am unable to find a solution.

// Get the modal
      var modal = document.getElementById("subscription");

      // Get the button that opens the modal
      var btn = document.getElementById("subscribe");

      // Get the <span> element that closes the modal
      var span = document.getElementsByClassName("close")[0];

      // When the user clicks the button, open the modal 
      btn.onclick = function() {
        modal.style.display = "block";
      }

      // When the user clicks on <span> (x), close the modal
     ...

javascript html css

Answer 1

Answer №1

It's important to use unique variable names for different QuerySelectors in order to access and manipulate them without reassigning.

If you do end up reassigning, keep in mind that only the most recent assignment will be considered while accessing the elements.

// Grab the modal
var modal = document.getElementById("subscription");

// Access the button that triggers the modal
var subscribeBtn = document.getElementById("subscribe");

// Get the <span> tag responsible for closing the modal
var closeSpan = document.getElementsByClassName("close")[0];

// Retrieve another modal element
var secondaryModal = document.getElementById("shout");

// Obtain the button associated with the secondary modal
var shoutButton = document.getElementById("mouthoff");

// Fetch the <span> used for closing the secondary modal
var closeSecondary = document.getElementsByClassName("close")[0];

// Show the initial modal when its respective button is clicked  
subscribeBtn.onclick = function() {
  modal.style.display = "block";
}

// Close the initial modal upon clicking the close <span>
closeSpan.onclick = function() {
  modal.style.display = "none";
}


// Display the secondary modal upon button click
shoutButton.onclick = function() {
  secondaryModal.style.display = "block";
}

// Hide the secondary modal when the close <span> is clicked
closeSecondary.onclick = function() {
  secondaryModal.style.display = "none";
}

// If user clicks outside the modals, close them
window.onclick = function(event) {
  if (event.target == modal || event.target == secondaryModal) {
    secondaryModal.style.display = "none";
    modal.style.display = "none";
  }
}

button.subscribe {
  background: transparent !important;
  border: none;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  margin-top: 7px;
  text-transform: uppercase;
}
...
...

<!-- Trigger/Open The Modal -->
<button class="subscribe" id="subscribe">Subscribe</button>
...
...

Answer 2

It's important to use unique variable names for different QuerySelectors in order to access and manipulate them without reassigning.

If you do end up reassigning, keep in mind that only the most recent assignment will be considered while accessing the elements.

// Grab the modal
var modal = document.getElementById("subscription");

// Access the button that triggers the modal
var subscribeBtn = document.getElementById("subscribe");

// Get the <span> tag responsible for closing the modal
var closeSpan = document.getElementsByClassName("close")[0];

// Retrieve another modal element
var secondaryModal = document.getElementById("shout");

// Obtain the button associated with the secondary modal
var shoutButton = document.getElementById("mouthoff");

// Fetch the <span> used for closing the secondary modal
var closeSecondary = document.getElementsByClassName("close")[0];

// Show the initial modal when its respective button is clicked  
subscribeBtn.onclick = function() {
  modal.style.display = "block";
}

// Close the initial modal upon clicking the close <span>
closeSpan.onclick = function() {
  modal.style.display = "none";
}


// Display the secondary modal upon button click
shoutButton.onclick = function() {
  secondaryModal.style.display = "block";
}

// Hide the secondary modal when the close <span> is clicked
closeSecondary.onclick = function() {
  secondaryModal.style.display = "none";
}

// If user clicks outside the modals, close them
window.onclick = function(event) {
  if (event.target == modal || event.target == secondaryModal) {
    secondaryModal.style.display = "none";
    modal.style.display = "none";
  }
}

button.subscribe {
  background: transparent !important;
  border: none;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  margin-top: 7px;
  text-transform: uppercase;
}
...
...

<!-- Trigger/Open The Modal -->
<button class="subscribe" id="subscribe">Subscribe</button>
...
...

Ways to incorporate several modals into your interface

Answer №1

Similar questions

Issue: Request from a different origin blocked

Transferring JSON Data into JavaScript Variables

Create a division that will remain visible on the screen and allow scrolling when a certain class is

Placing error notifications beneath my table rows for a more polished appearance

Autonomous boundary for list elements

Implementing dynamic data binding in JavaScript templates

Update the labelClass of markers when hovering over them with jQuery on Google Maps

Should I consider using Derby.js or Meteor for a production app with authentication capabilities?

As I hover over this bootstrap button with the class "btn-info", its background color fades away

Enhance the appearance of your Vuejs application with conditional style formatting

Tips for dynamically changing the color of a React Native style based on data conditions

Unleashing the power of RollupJs: A guide to dynamically bundling modules and objects

Steps for positioning one div below another:1. Set the position property

I am on a quest to locate the xpath for a day that is divided by the HTML line break element,

When a jquery confirm dialog is displayed, the scroll bar mysteriously fades away

Retrieve a single record in Angular/Typescript and extract its ID value

How can we transfer parameters in JavaScript?

I'm having trouble resolving this issue - Internal server error: Cannot redefine property: File. Can anyone help me out with a solution?

Use Jquery to add unique styles to specific words within a paragraph

AngularJS implementation for a confirmation dialog with data