在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
