javascript - Bootstrap modal won't close on click - Stack Overflow

admin管理员组

文章数量:1327972

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:

(**...?panyName=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('panyName')); // 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 pany 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>

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:

(**...?panyName=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('panyName')); // 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 pany 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>

• javascript
• jquery
• bootstrap-modal

Share Improve this question Follow edited Sep 2, 2016 at 20:06 Paul Roub 36.5k2727 gold badges8686 silver badges9595 bronze badges asked Sep 2, 2016 at 19:47 Craig RectorCraig Rector 3111 silver badge22 bronze badges 2

• You can add onclick event to your close button and hide the modal in that onclick function using .hide(). – Arjun Commented Sep 2, 2016 at 19:51
• Sounds like you are doing this like a kind of alert right? In that case why you are not using "bootbox.js"? It's a plugin to show alerts but it's similar to a modal – Francisco Fernandez Commented Sep 2, 2016 at 20:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

This is what I think you want see fiddle https://jsfiddle/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();
  });

本文标签： javascriptBootstrap modal won39t close on clickStack Overflow