javascript - 提交表单后 Bootstrap 模式不关闭

Question

我相信我会在这里得到一个解决方案，bootstrap modal 在表单提交后不会消失。 我只想让 bootstrap 模态在提交表单后消失，当再次单击按钮(不刷新页面)时，表单应该打开，发送数据和模态应该消失等等......就是这样!

这是一个 Bootstrap 模式:

<div class="modal fade myPopup" id="basicModal" tabindex="-1" role="dialog" 
aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog" id="modal_dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Add New Board</h4>
      </div>
      <div class="modal-body">
        <form class="create_Category_board" id="myform">
          <input type="text" 
                 id="customInput"
                 class="board_name"
                 name="board[name]"
                 placeholder="Board Name ..." />
          <input type="text"
                 class="board_description"
                 name="board[description]"
                 placeholder="Board Description ..." />
          <input type="hidden"
                 class="board_description"
                 id="myCid"
                 name="board[category_id]" />
          <input type="submit" value="Create Board" class="ShowFormButton"/>
        </form>
      </div>
      <div class="modal-footer">

      </div>
    </div>
  </div>
</div>

我的表单绑定(bind)了 backbone JS 函数:

events: {

    "submit form.create_Category_board": "createCategoryBoard"
  },

  createCategoryBoard: function(event) {
    event.preventDefault();
    var that = this;

    // get form attrs, reset form
    var $form = $(event.target);
    var attrs = $form.serializeJSON();

    $form[0].reset();

    var board = new Kanban.Models.Board();

    // fail if no board name
    if (!attrs.board.name) {
      var $createContainer = $("div.create_board");
      var $nameInput = that.$el.find("input.board_name");

      $createContainer.effect("shake", {
        distance: 9,
        times: 2,
        complete: function() {
          $nameInput.show();
          $nameInput.focus();
        }
      }, 350);
      return false;
    }

    attrs.board.category_id = myid;
    var category = Kanban.categories.get(myid);
    var boards = category.get("assigned_boards");
    // save list
    board.save(attrs.board, {
      success: function(data) {
        board.get("users").add(Kanban.currentUser);

        boards.add(board);

        // keep focus on list input
        that.$el.find("input.board_name").focus();

      }
    });
    $('#basicModal').modal('hide');
  }

作为上述函数的最后一行，我尝试了最流行的解决方案 $('#basicModal').modal('hide'); 在网络上可用!它使我的模态看起来像这样:

即它不隐藏模态，而且使屏幕变黑并将 Bootstrap 模态的方向从屏幕中心更改为小右。可能是被 JS 的 CSS 覆盖了。但我不确定。

Answer 1

我发布自己的答案是因为如果有人需要更快的帮助，那么它可能会有所帮助: 只需将 $('#basicModal').modal('hide'); 替换为以下行:

$(".modal-header button").click(); 这是我的 JS 函数的最后一行。 干杯 :)