Bootstrap modal won't close on click

Question

I am very new to web dev. Still not too familiar with JavaScript. I am making an error message using that will load using code one of our dev guys created for a different page. I created modals that show on a click event and then close on a click event. For this one I am having the modal show based on returned URL parameters. And I am using code I copied from another page one of our dev guys made (not with Bootstrap modals).

The code below makes the modal show, but the buttons used to close the modal don't work. Not sure why.

This is the tag that will append the URL when returned:

(**...?companyName=ACME47 & err1=0 & err2=0 & err3=1**)

When the error values are 1 is loads the page to show the error modal with the text for that error in it.

Here is the code I'm using for the form (not attaching the style sheet, so it looks different).

jQuery(document).ready(function() {

  //  jQuery code snippet to get the dynamic variables stored in the url as parameters and store them as JavaScript variables ready for use with your scripts

  $.urlParam = function(name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results == null) {
      return null;
    } else {
      return results[1] || 0;
    }
  }

  // Get url parameters

  var err1 = new Number($.urlParam('err1'));
  if (isNaN(err1)) {
    err1 = new Number(0);
  }
  var err2 = new Number($.urlParam('err2'));
  if (isNaN(err2)) {
    err2 = new Number(0);
  }
  var err3 = new Number($.urlParam('err3'));
  if (isNaN(err3)) {
    err3 = new Number(0);
  }

  console.log('err1: ' + err1); // Writes a message to the browser console [f12]
  console.log('err2: ' + err2); // Writes a message to the browser console [f12]
  console.log('err3: ' + err3); // Writes a message to the browser console [f12]
  console.log('CompanyName: ' + $.urlParam('companyName')); // Writes a message to the browser console [f12]

  // Display error message function

  // Read a page's GET URL variables and return them as an associative array.

  if (err1 > 0) {
    $("#error-box").show();
    $("#error-1").show();
  };
  if (err2 > 0) {
    $("#error-box").show();
    $("#error-2").show();
  };
  if (err3 > 0) {
    $("#error-box").show();
    $("#error-3").show();
  };

});

<div class="modal" id="error-box" style="display: none;" tabindex="-1" role="dialog" aria-labelledby="error-boxLabel">
  <div class="modal-dialog" role="document" style="height:200px;">
    <div class="modal-content" style="height: 100%;">
      <div class="modal-header alert-danger">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title text-danger">Form Submission Error</h4>
      </div>
      <div class="modal-body alert-danger" style="height: 100%;">
        <div class="textWrapper">
          <ul>
            <li id="error-1" style="display: none;">That email address is already in use. (01)</li>
            <li id="error-2" style="display: none;">A company with that name already has an account in this system. (02)</li>
            <li id="error-3" style="display: none;">An unknown error has occurred. If your E-Mail or Phone Number was correctly filled in, you will be contacted shortly. (03)</li>
          </ul>
        </div>
      </div>
      <div class="modal-footer modal-footer-text">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

You shouldn't be using jQuery's show() method to show the modal. Doing so doesn't register it with Bootstrap, so there's nothing to close with elements possessing the data-dismiss attribute. Use Bootstrap's method :

$("#error-box").modal('show');

Note that you may also need to use Bootstrap's show.bs.modal callback to show your error containers. It's possible that they won't be available to jQuery until the modal is initiated.

Answer 2

This is what I think you want see fiddle https://jsfiddle.net/sxh0n7d1/53/

Note: I set all the errors to visible in the fiddle, so that there is something to see how it works.

add this to your javascript

  $('.close, .btn-danger').click(function() {
        $( "#error-box" ).hide();
  });