Question

我在通过jquery关闭Bootstrap模式窗口时遇到问题（例如$（'＃modalName'）。modal（'hide'）;）。

以下是主页（index.cfm）中包含的所有相关部分的基本结构：

模态的标记：

<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>

链接到开放式模式：

<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>

然后调用以下jquery并单击上面的链接。这会刷新模态的内容，以确保每次都显示正确的信息。

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

然后触发一个模式已显示在屏幕上。它只是通过jquery库调整模态的textarea的高度，然后将光标设置在任何导入文本的末尾。

$('#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');
    });
  });

正如您所看到的，我还希望它能够在单击提交按钮时进行监听，然后通过Ajax处理表单数据并关闭模式。我可以让它来做Ajax部分，但模态永远不会关闭。

以下是每次导入到addEventModal的模态内容中的AddEventModal_Form.cfm文件的基本结构：

<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>

我做错了什么？

Answer 1

如果隐藏模态对话框，它将不会关闭。

试试这个：

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

Answer 2

添加data-dismiss =＆＃34; modal＆＃34;应该工作：

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

无法通过jquery关闭Bootstrap模式

2 个答案: