Bootstrap 表单提交后模态不关闭

Question

我相信我会在这里得到解决方案，bootstrap表单提交后模态不会消失。 我只想让 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>

我的表单绑定了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

问题是 div.modal- 隐藏模式后背景仍然存在，你可以在开发人员中看到它 tools.Try 简单删除 $('#basicModal').modal('hide'); $('.modal-backdrop').remove();

干杯

Answer 2

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

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

Bootstrap 表单提交后模态不关闭

Bootstrap modal not closing after form submission

javascript

css

jquery

backbone.js

twitter-bootstrap