AngularJS弹出框 $modal的使用

//HTML:注意在Chrome浏览器中会给input添加默认样式，影响到打钩的框出不来，主要是position和影响透明度的opacity

<script type="text/ng-template" id="noticeListModal.html">
    <div class="modal-header">
        <h3 class="modal-title">发送通知</h3>
    </div>
    <div class="modal-body">
        <form>
            <div style="float:right">
                <label style="margin-right:15px">
                    <input type="checkbox" ng-model="isHouseOwnerChecked" style="position:static;opacity: 0.5" value="屋主" checked>
                    屋主</label>
                <label style="margin-right:15px">
                    <input type="checkbox" ng-model="isHirerChecked" style="position:static;opacity: 0.5" value="租户" checked>
                    租户</label>
            </div>
            <div>
                <label style="margin-bottom: 10px">
                    标题:<input type="text" ng-model="noticeTitle" style="width: 350px;">
                </label>
                <textarea cols="91" rows="8" name="contactus" ng-model="notice">{{notice}}</textarea>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-blue" ng-click="ok()">确定</button>
        <button class="btn btn-warning" ng-click="cancel()">取消</button>
    </div>
</script>

//JS:showEdit是点击button的事件，写在method中；

showEdit:function (trueOrfalse) {
            var modalInstance = $modal.open({
                windowClass: '',
                templateUrl: 'noticeListModal.html',
                controller: 'ModalInstanceCtrl',
                resolve: {
                }
            });
            modalInstance.opened.then(function() {// 模态窗口打开之后执行的函数
                console.log('modal is opened');
            });
            modalInstance.result.then(function (ret) {//模态窗口关闭之后回传参数
$modalInstance.close($scope.selected);
                 console.log(ret); 
             }, function (reason) { 
                 console.log(reason); 
          }); 
       }

//模态窗口的controller

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, toaster) {
    $scope.notice = '';
    $scope.noticeTitle = '';
    $scope.isHouseOwnerChecked = 0;
    $scope.isHirerChecked = 0;

    $scope.ok = function() {
        $scope.isHouseOwnerChecked = $scope.isHouseOwnerChecked?1:0;
        $scope.isHirerChecked = $scope.isHirerChecked?1:0;
        if(!$scope.notice || !$scope.noticeTitle) {
            toaster.pop("error", "请添加通知内容");
            return
        }
        if(!$scope.isHouseOwnerChecked && !$scope.isHirerChecked) {
            toaster.pop("error", "请选择发送角色");
            return
        }

        $.ajax({
                url: "/rest/sysNotice/test",
                data:{
                    isNoticeHouseOwner:$scope.isHouseOwnerChecked,
                    isNoticeHirer:$scope.isHirerChecked,
                    memo:$scope.notice,
                    title:$scope.noticeTitle
                },
                success: function (resp) {
                    if(resp.success) {
                        toaster.pop("success", "发送成功", resp.message);
                    }else{
                        toaster.pop("error", "发送通知", resp.message);
                    }
                }
            });
        $modalInstance.close();

    };
    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
});

详细的$modal属性和方法可以参考这里：

https://blog.csdn.net/CSDN_lihe/article/details/49633481