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>

我的表单与主干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

问题是在隐藏模态后div.modal-backdrop仍然存在，您可以在开发人员工具中看到它。尝试简单删除 $('#basicModal').modal('hide'); $('.modal-backdrop').remove();

干杯

Answer 2

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

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

表单提交后Bootstrap模式未关闭

2 个答案: