提交表單后，引導程序模式未關閉

Question

我相信我會在這里得到解決方案，表單提交后引導模態不會消失。 我只想在提交表單后使引導程序模式消失，並且再次單擊按鈕（不刷新頁面）時，表單應該打開，發送數據並且模式應該消失，依此類推……就是這樣！

這是一個引導模式：

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

我的表單綁定了主干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'); 網上有售！ 它使我的模態看起來像這樣：

即它不隱藏模態，而且使屏幕變黑，並將引導模態的方向從屏幕中心更改為小右。 可能是JS的CSS覆蓋了它。 但我不確定。

Answer 1

我發布自己的答案，因為如果有人需要更快的幫助，那么它可能會有所幫助：只需替換： $('#basicModal').modal('hide'); 用這一行：

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

Answer 2

問題是在隱藏模態后div.modal-backdrop仍然存在，您可以在開發人員工具中看到它。嘗試簡單刪除$('#basicModal').modal('hide'); $('.modal-backdrop').remove();

干杯