title: Bootstrap modal not closing after form submission
body: <p>I believe I will get a solution here, bootstrap modal does not disappear after form submission. <strong>I only want to make bootstrap modal disappear after form submission and when again button is clicked (without refreshing the page) form should open, send data and modal should disappears and so on...</strong> This is it !</p>
  
  <p>Here is a bootstrap modal:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="modal fade myPopup" id="basicModal" tabindex="-1" role="dialog" 
  aria-labelledby="basicModal" aria-hidden="true"&gt;
    &lt;div class="modal-dialog" id="modal_dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Add New Board&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;form class="create_Category_board" id="myform"&gt;
            &lt;input type="text" 
                   id="customInput"
                   class="board_name"
                   name="board[name]"
                   placeholder="Board Name ..." /&gt;
            &lt;input type="text"
                   class="board_description"
                   name="board[description]"
                   placeholder="Board Description ..." /&gt;
            &lt;input type="hidden"
                   class="board_description"
                   id="myCid"
                   name="board[category_id]" /&gt;
            &lt;input type="submit" value="Create Board" class="ShowFormButton"/&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My form is bound with backbone JS function: </p>
  
  <pre class="lang-js prettyprint-override"><code>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');
    }
  </code></pre>
  
  
  
  <p>As a last line in above function I have tried most popular solution <code>$('#basicModal').modal('hide');</code> available on web! It makes my modal look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/7To4x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7To4x.png" alt="modal"></a> </p>
  
  <p>i.e. it not hides the modal, moreover make screen black and change the direction of bootstrap modal from center of screen to little right. May be it is overridden by CSS of JS. But I am not sure. </p>