title: Why is my modal window not closing after a click?
body: <p>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 </p>
  
  <pre><code>&lt;form&gt;
  &lt;div class="form-group"&gt;
              &lt;label class="control-label col-md-4 col-lg-3 required" for="offer_title" id="ThemaLbl"&gt;
                  &lt;div class="inline-help form-label"&gt;&lt;i onClick="myFunction('themaModal')" class="fa fa-question-circle-o" id="ThemaHilfe"&gt;&lt;/i&gt;&lt;/div&gt;Thema&lt;/label&gt;
              &lt;div class="col-md-8 col-lg-9"&gt;
                  &lt;textarea class="longInput" cols="42" rows="1" id="ThemaTextfield"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- The Modal --&gt;
          &lt;div id="themaModal" class="modal"&gt;
  
              &lt;!-- Modal content --&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modalheader"&gt;
                      &lt;h2&gt;&lt;p&gt;&lt;b id="hilfeTitel"&gt;Wie kann ich eine neue Anzeige erstellen?&lt;/b&gt;&lt;/p&gt;&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;p style="display: block;"&gt;&lt;font size="6" id="hilfeText"&gt;&lt;b id="hilfeText"&gt;Sie wollen eine neue Anzeige anlegen?&lt;/b&gt; Dann tragen Sie die zugehörigen Informationen ein und speichern
          das Ergebnis am Ende ab.&lt;/font&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;div class="panel panel-default" id="feedback-form"&gt;
                          &lt;div class="panel-heading"&gt;
                              &lt;h4 class="panel-title" id="hilfeQuestion"&gt;
          &lt;i class="fa fa-question-circle"&gt;&lt;/i&gt; Waren die Informationen für Sie hilfreich? &lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div class="panel-body"&gt;
                              &lt;form class="feedback" id="new_feedback" role="form" action="/feedbacks" method="post" accept-charset="UTF-8" data-remote="true"&gt;
                                  &lt;input name="utf8" type="hidden" value="✓"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;textarea name="feedback[comment]" class="form-control" id="feedback_comment" placeholder="Sie können uns hier Ihre Anmerkungen mitteilen."&gt;&lt;/textarea&gt;
                                  &lt;/div&gt;
                                  &lt;input name="feedback[context]" id="feedback_context" type="hidden" value="/offers/new"&gt;
                                  &lt;input name="feedback[help_key]" id="feedback_help_key" type="hidden" value="help.offers.new"&gt;
                              &lt;/form&gt;
                              &lt;div class="hidden response"&gt;
                                  Vielen Dank für Ihr Feedback!
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="sa-button-container"&gt;
                          &lt;button tabindex="2" class="cancel" style="display: none; box-shadow: none;"&gt;Cancel&lt;/button&gt;
                          &lt;div class="sa-confirm-button-container"&gt;
                              &lt;button id="commentOK" tabindex="1" class="confirm" style="display: inline-block; box-shadow: 0px 0px 2px rgba(140,212,245,0.8), inset 0px 0px 0px 1px rgba(0,0,0,0.05);"&gt;OK&lt;/button&gt;
                              &lt;div class="la-ball-fall"&gt;
                                  &lt;div&gt;&lt;/div&gt;
                                  &lt;div&gt;&lt;/div&gt;
                                  &lt;div&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
              &lt;label class="control-label col-md-4 col-lg-3" for="offer_content" id="InhaltLbl"&gt;
                  &lt;div class="inline-help form-label" &gt;&lt;i onClick="myFunction('inhaltModal')" class="fa fa-question-circle-o" id="InhaltHilfe"&gt;&lt;/i&gt;&lt;/div&gt;Inhalt&lt;/label&gt;
              &lt;div class="col-md-8 col-lg-9"&gt;
                  &lt;textarea class="longInput" cols="42" rows="4" id="InhaltTextfield"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- The Modal --&gt;
          &lt;div id="inhaltModal" class="modal"&gt;
  
              &lt;!-- Modal content --&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modalheader"&gt;
                      &lt;h2&gt;&lt;p&gt;&lt;b id="hilfeTitel"&gt;Wie kann ich eine neue Anzeige erstellen?&lt;/b&gt;&lt;/p&gt;&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;p style="display: block;"&gt;&lt;font size="6" id="hilfeText"&gt;&lt;b id="hilfeText"&gt;Sie wollen eine neue Anzeige anlegen?&lt;/b&gt; Dann tragen Sie die zugehörigen Informationen ein und speichern
          das Ergebnis am Ende ab.&lt;/font&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;div class="panel panel-default" id="feedback-form"&gt;
                          &lt;div class="panel-heading"&gt;
                              &lt;h4 class="panel-title" id="hilfeQuestion"&gt;
          &lt;i class="fa fa-question-circle"&gt;&lt;/i&gt; Waren die Informationen für Sie hilfreich? &lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div class="panel-body"&gt;
                              &lt;form class="feedback" id="new_feedback" role="form" action="/feedbacks" method="post" accept-charset="UTF-8" data-remote="true"&gt;
                                  &lt;input name="utf8" type="hidden" value="✓"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;textarea name="feedback[comment]" class="form-control" id="feedback_comment" placeholder="Sie können uns hier Ihre Anmerkungen mitteilen."&gt;&lt;/textarea&gt;
                                  &lt;/div&gt;
                                  &lt;input name="feedback[context]" id="feedback_context" type="hidden" value="/offers/new"&gt;
                                  &lt;input name="feedback[help_key]" id="feedback_help_key" type="hidden" value="help.offers.new"&gt;
                              &lt;/form&gt;
                              &lt;div class="hidden response"&gt;
                                  Vielen Dank für Ihr Feedback!
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="sa-button-container"&gt;
                          &lt;button tabindex="2" class="cancel" style="display: none; box-shadow: none;"&gt;Cancel&lt;/button&gt;
                          &lt;div class="sa-confirm-button-container"&gt;
                              &lt;button id="commentOK" tabindex="1" class="confirm" style="display: inline-block; box-shadow: 0px 0px 2px rgba(140,212,245,0.8), inset 0px 0px 0px 1px rgba(0,0,0,0.05);"&gt;OK&lt;/button&gt;
                              &lt;div class="la-ball-fall"&gt;
                                  &lt;div&gt;&lt;/div&gt;
                                  &lt;div&gt;&lt;/div&gt;
                                  &lt;div&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>/* 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;
  }
  </code></pre>
  
  <p>Here my js:</p>
  
  <pre><code>function myFunction(modalElem){
  // Get the modal
  var modal = document.getElementById(modalElem);
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementById("commentOK");
  
    modal.style.display = "block";
  
  
  // When the user clicks on &lt;span&gt; (OK), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  }
  </code></pre>
  
  <p>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?</p>