ADD Using Bootstrap Modal Mode Does Not Work

I want to use a modal form to populate my current table but it won't work. I just need some help, I might have missed something here. Thanks!

Here's my code for the button:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal" href="add_dept.php">+ Add Department</button>

Here's my code in the bottom of my file to show the modal content:

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
    </div>
</div>

Here's my code for add_dept.php:

<?php include("../includes/config.php");
$reqErr = "";
if($_SERVER['REQUEST_METHOD'] == "POST") {
  if(!empty($_POST['dept_name']) && !empty($_POST['dept_code'])) {
    $dept_name = $_POST['dept_name'];
    $dept_code = $_POST['dept_code'];
    $query_addDept = "INSERT INTO department(dept_name,dept_code) VALUES('$dept_name','$dept_code')";
    if(mysqli_query($con,$query_addDept)) {
        $reqErr = '<div class="alert alert-success" id="myAlert">
              <a href="" class="close">    <i class="fa fa-times"></i></a>
            <i class="fa fa-check-circle"></i> Department added</div>';
            mysqli_close($con);
    }
    else {
      $reqErr = '<div class="alert alert-danger" id="myAlert">
            <a href="" class="close">    <i class="fa fa-times"></i></a>
          <i class="fa fa-exclamation-circle"></i> Failed to add Department</div>';
    }
  }
}
?>

<?php echo $reqErr; ?>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h4 class="modal-title">Add Department</h4>
</div>
<div class="modal-body">
  <form method="POST" class="form" id="add-department" role="form">
  <div class="form-group">
    <input type="text" class="form-control" id="dept_name" name="dept_name" placeholder="Department Name" />
    <span class="help-block"></span>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" id="dept_code" name="dept_code" placeholder="Department Code" />
    <span class="help-block"></span>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <input type="submit" id="submit_btn" class="btn btn-primary" />
  </div>
  </form>
</div>

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal" href="add_dept.php">+ Add Department</button>

delete the href=""

 <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
              <?php require_once('add_dept.php'); ?>
         </div>
     </div>
</div>

add the last - close div