Why is my modal window not closing after a click?

Question

I have two elements on my HTML. In each of the labels there is a question mark icon wrapped in. A click on a question mark fires a modal window. This is my html code looks like



            
                
Thema
            
                
            



        

            
            
                
                    Wie kann ich eine neue Anzeige erstellen?
                
                
                    Sie wollen eine neue Anzeige anlegen? Dann tragen Sie die zugehörigen Informationen ein und speichern
        das Ergebnis am Ende ab.
                
                
                    
                        
                            
         Waren die Informationen für Sie hilfreich? 
                        
                        
                            
                                
                                
                                    
                                
                                
                                
                            
                            
                                Vielen Dank für Ihr Feedback!
                            
                        
                    

                    
                        
                        
                            
                            
                                
                                
                                
                            
                        
                    
                
            
        


            
                
Inhalt
            
                
            
        

        
        

            
            
                
                    Wie kann ich eine neue Anzeige erstellen?
                
                
                    Sie wollen eine neue Anzeige anlegen? Dann tragen Sie die zugehörigen Informationen ein und speichern
        das Ergebnis am Ende ab.
                
                
                    
                        
                            
         Waren die Informationen für Sie hilfreich? 
                        
                        
                            
                                
                                
                                    
                                
                                
                                
                            
                            
                                Vielen Dank für Ihr Feedback!

The first box works ok. The second box however, for some reason doesn't close after clicking on the OK button. My .css looks like this:

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


.modalheader{

    margin: -17px -17px 15px;
    padding: 10px 15px;
    background-color: #f2fcde;
    border-bottom: 1px solid silver;
    font-weight: 600;
    line-height: 40px;
    display: -ms-flexbox !important;
    font-family: inherit;
    font-size: 7;
}

Here my js:

function myFunction(modalElem){
// Get the modal
var modal = document.getElementById(modalElem);

// Get the  element that closes the modal
var span = document.getElementById("commentOK");

  modal.style.display = "block";


// When the user clicks on  (OK), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

I tried placing the code for modal windows outside the "form" close to the body at the bottom in the html file but that didnt help. I'm not an experienced html programmer and whatever the bug is, I just couldn't find it. How can I fix this?

jmtalarn · Accepted Answer

The problem comes as you are using same id for both buttons in both modals. document.getElementById search for a unique element with that id in the whole document, and in result it just returns first element in HTML with that id.

It is recommended to use unique id in HTML elements

If the id value is not the empty string, it must be unique in a document.

Check this https://developer.mozilla.org/en-US/docs/Web/API/Element/id

But if you want to stay with repeating ids, you should look for that element from the children in the modal div element. You can use the querySelector to do that and query for id attribute

Query selector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Attribute selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Working example here:

function myFunction(ok) {
  // Get the modal
  var modal = document.getElementById(ok);

  // Get the  element that closes the modal
  var span = modal.querySelector("[id=commentOK]");

  modal.style.display = "block";


  // When the user clicks on  (OK), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  }
}

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 999;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modalheader {
  margin: -17px -17px 15px;
  padding: 10px 15px;
  background-color: #f2fcde;
  border-bottom: 1px solid silver;
  font-weight: 600;
  line-height: 40px;
  display: -ms-flexbox !important;
  font-family: inherit;
  font-size: 7;
}


  
    
                ?
Thema
    
      
    
  

  
  

    
    
      
        Wie kann ich eine neue Anzeige erstellen?
        
      
      
        
          Sie wollen eine neue Anzeige anlegen? Dann tragen Sie die zugehörigen Informationen ein und speichern das Ergebnis am Ende ab.
        
      
      
        
          
            
               Waren die Informationen für Sie hilfreich? 
          
          
            
              
              
                
              
              
              
            
            
              Vielen Dank für Ihr Feedback!
            
          
        

        
          
          
            
            
              
              
              
            
          
        
      
    
  

  
    
                ?
Inhalt
    
      
    
  

  
  

    
    
      
        
          Wie kann ich eine neue Anzeige erstellen?
        
      
      
        
          Sie wollen eine neue Anzeige anlegen? Dann tragen Sie die zugehörigen Informationen ein und speichern das Ergebnis am Ende ab.
        
      
      
        
          
            
               Waren die Informationen für Sie hilfreich? 
          
          
            
              
              
                
              
              
              
            
            
              Vielen Dank für Ihr Feedback!

Why is my modal window not closing after a click?

Answers (2)

Related Questions