在AngularJS中主要使用bootstrap-modal使用弹窗效果。

安装bootsrap-modal插件：

bower install bootstrap-modal --save

基本组件引用：

    <link rel="stylesheet" href="bower_components/bootstrap-modal/css/bootstrap-modal.css" />
    <script src="bower_components/bootstrap-modal/js/bootstrap-modal.js"></script>
    <script src="bower_components/bootstrap-modal/js/bootstrap-modalmanager.js"></script>

html开发：

      <div class="modal fade in" id="addNatgwModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
              <h4 class="modal-title" id="myModalLabel">添加NAT网关</h4>
            </div>
            <div class="modal-body form-group">
              <div class="row">
                <label class="control-label col-sm-4" for="natgwAddIp">ip地址：</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="natgwAddIp">
                </div>
              </div>
              <div class="row">
                <label class="control-label col-sm-4" for="natgwAddPort">端口号：</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="natgwAddPort">
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary" id="addNatgwModalBtn" ng-click="addNatgw()">确定</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal -->
      </div>

上述创建了一个modal，其中有两个label，两个input和两个button。

js开发：

定制modal中相关动作实现，这时候就需要在controller中添加部分代码：

    $('#addNatgwModalBtn').on('click', function () {
      var ipAddr = $('#natgwAddIp').val();
      var port = $('#natgwPort').val();
      var data = {'ip': ipAddr, 'agent_port': port};

      $http({
        url: 'http://127.0.0.1:8000/api/v1/natgw',
        method: 'post',
        data: data
      }).then(
        function successCallback(response) {
          console.log('response is:', response);
          $('#addNatgwModal').modal('hide');
          $('#natgwTable').bootstrapTable('refresh', {silent: true});
        },
        function errorCallback(error) {
          console.log('response is:', error);
        }
      )
    });

结果呈现：

modal_page.png

---

参考资料：

• Bootstrap 模态框（Modal）插件