AgularJS使用Bootstrap实现弹出框

对Agular不是很熟，接到个弹出框需求，网上查了一圈AhularJS实现弹出框的文章，发现都不太便利，最后发现用bootstrap做会方便很多，特记录一下。

页面代码：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h4 class="modal-title" id="myModalLabel">新增</h4>
 </div>
 <div class="modal-body">
 
  <div class="form-group">
  <label for="txt_departmentname">部门名称</label>
  <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="部门名称">
  </div>
  <div class="form-group">
  <label for="txt_parentdepartment">上级部门</label>
  <input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="上级部门">
  </div>
  <div class="form-group">
  <label for="txt_departmentlevel">部门级别</label>
  <input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="部门级别">
  </div>
  <div class="form-group">
  <label for="txt_statu">描述</label>
  <input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="状态">
  </div>
 </div>
 <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
  <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
 </div>
 </div>
 </div>
 </div>

逻辑代码：

//注册新增按钮的事件
$("#btn_add").click(function () {
$("#myModalLabel").text("新增");
$('#myModal').modal();
});

修改页面代码第二行的class可以改变其弹窗尺寸，有三种固定尺寸：

<div class="modal-dialog" role="document">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-dialog modal-full" role="document">

也可以在这一行自行更改style来改变弹窗尺寸

原文出处：https://www.jb51.net/article/76013.htm