无法通过jQuery关闭Bootstrap模态

Question

I am having problems closing a Bootstrap modal window via jquery (eg $('#modalName').modal('hide');).

The following is the basic structure of all the relevant parts contained within the main page (index.cfm):

The modal's markup:

<div class="modal fade modal-wide" id="addEventModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!--- Content inserted here --->
    </div>
  </div>
</div>

Link to open modal:

<a data-toggle="modal" href="AddEventModal_Form.cfm?listOfParams" data-target="#addEventModal" class="btn btn-primary btn-sm btn-addEvent"><span class="glyphicon glyphicon-plus"></span> Add</a>

The following jquery is then called with the above link is clicked. This refreshes the contents of the modal to make sure I'm displaying the correct information each time.

//Refresh the modal's contents prior to display 
  $(document).on("click", ".btn-viewAll, .btn-addEvent", function(e){   
    $($(this).attr('data-target')).removeData('bs.modal');
  });

This is then triggered one the modal has been displayed on the screen. It just adjusts the height of the modal's textarea via a jquery library and then sets the cursor at the end of any imported text.

$('#addEventModal').on('shown.bs.modal', function(){
    //Adjust the textarea's number of rows
    $('textarea').autosize();

    //Set focus to end of text in textarea. Doesn't work in older versions of IE.
    var el = $("#currentEventText").get(0);
    var elemLen = el.value.length;

    el.selectionStart = elemLen;
    el.selectionEnd = elemLen;
    el.focus();

    //Process the form via Ajax and close the modal window
    $("#submitButton").on('click', function(){
      //Process the form data via Ajax here...

      //Close the modal window  
      $('#addEventModal').modal('hide');
    });
  });

As you can see, what I also want it to do is listen for when the submit button is clicked and then process the form data via Ajax and close the modal. I can get it to do the Ajax part but the modal never closes.

Here's the basic structure of the AddEventModal_Form.cfm file that is imported into the addEventModal's modal-content each time:

<div class="modal-header">
  <h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">  
  <textarea name="currentEventText" id="currentEventText" class="form-control textarea-animate" rows="6"></textarea>     

  <div class="button-div">
    <a href="javascript:void(0);" class="btn btn-default btn-sm" onclick="javascript:$('#currentEventText').val('').trigger('autosize.resize');"> Clear</a>  
    <a href="javascript:void(0);" id="submitButton" class="btn btn-primary btn-sm">Submit</a>
  </div>
</div>

What am I doing wrong?

Answer 1

If you hide the modal dialog it will not get closed.

Try this:

$("#submitButton").on('click', function() {
    $('#addEventModal').close();
});

Answer 2

添加data-dismiss =“ modal”应该可以：

 <a href="javascript:void(0);" id="submitButton" class="btn btn-primary btn-sm" data-dismiss="modal">Submit</a>