上弹模态框

1、需要一个点击事件

<ion-item ng-click="OpenIonicModal()">
    <span>打开模态框</span>
</ion-item>

2、初始化model

$ionicModal.fromTemplateUrl('XXXX.html', {
    scope: $scope,
    animation: "slide-in-up"
}).then(function (modal) {
    $scope.modal = modal;
});

3、XXXX.html

<script id="XXXX.html" type="text/ng-template">
    <ion-modal-view class="shade-background">
        <div class="goods-detail-attr-select">
            <ion-content overflow-scroll="true" class="no-scroll" lazy-scroll style="overflow:auto;">
                <div class="padding" style="float: right;font-size: 18pt;padding-right: 20px;padding-top: 10px"
                     ng-click="hideXXXXModal()">
                    <i class="icon ion-ios-close-empty" style="color: #858585;font-size: 30px;"></i>
                </div>
            </ion-content>
        </div>
    </ion-modal-view>
</script>

4、XXXX.css

.shade-background {
    background: rgba(0,0,0,.7);
}

.goods-detail-attr-select {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 70%;
    background: #ffffff;
}

5、显示模态框

$scope.OpenIonicModal = function () {
    $scope.modal.show();
};

6、关闭模态框

$scope.hideXXXXModal = function () {
    $scope.modal.hide();
};