Bootstrap modal not closing after form submission

I believe I will get a solution here, bootstrap modal does not disappear after form submission. 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... This is it !

Here is a bootstrap modal:

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

My form is bound with backbone JS function:

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');
  }

As a last line in above function I have tried most popular solution $('#basicModal').modal('hide'); available on web! It makes my modal look like this:

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.