ionic——$ionicPopup 自定义弹窗

微生新霁

2023-12-01

ionic 弹窗写法
上述链接所讲的弹窗内容模板是官网固定写好的，有时就不满足自己项目所需，官网介绍了一个属性，可以自定义弹窗内容

templateUrl
所引用弹窗内容的 html文件地址

//弹窗
var confirmPopup = $ionicPopup.confirm({
    title: '服务协议与隐私政策',
    templateUrl: '../templates/tab-privacyAgree.html',
    // template: '欢迎使用爱鲸准APP,在你使用爱鲸准APP服务前，请认真阅读《服务协议》和《隐私协议》全部条款。我们非常重视您的用户权益与个人信息的保护，我们将通过上诉协议向你说明我们如何为你提供服务并保障你的用户权益，如你同意，请点击“同意并继续”接受我们的服务。',
    cssClass: 'new_confirm',//自定义的样式名称，在这个样式名称下修改popup的样式，用以覆盖默认样式。
    cancelText: '不同意并退出',//取消按钮
　　                    okText: '同意并继续',//确认按钮
})
confirmPopup.then(function(res) {
    if(res){ //同意
        localStorage.setItem("isApply",true)
        //检测是否有自动更新
        var versionCode = AppVersion.build
        //判断当前是否是苹果机
        var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1
        if(isAndroid){
            var versionCode = AppVersion.build;
            console.log(versionCode); 
            //app android 自动更新
            var updateUrl = "https://jingzhun.s3.cn-northwest-1.amazonaws.com.cn/app/version.xml";
            window.AppUpdate.checkAppUpdate(
                function () {
                    console.log("success");
                }, 
                function () {
                    console.log("fail");
                }, updateUrl
            )
        }
    }else{ //不同意
        ionic.Platform.exitApp()
    }
});

下面以angular举例
tab-privacyAgree.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
        <div class="agreeMain" ng-app="starter" ng-controller="privacyAgreeController">
            <div class="yinsandfuw" ng-if='serveAndPrivacy'>
                <div class="title">服务协议与隐私协议</div>
                <div class="yinsP">欢迎使用前，请认真阅读<span class="yinsfuw" ng-click="serveClick()">《服务协议》</span>和<span class="yinsfuw" ng-click="privacyClick()">《隐私协议》</span>全部条款。我们非常重视您的用户权益与个人信息的保护，我们将通过上诉协议向你说明我们如何为你提供服务并保障你的用户权益，如你同意，请点击“同意并继续”接受我们的服务。</div>
            </div>
            <div class="yinsandfuw" ng-if='isServe'>
                <div class="title">
                    <span ng-click='goBack()' class="jiantBack"></span>
                    服务协议
                </div>
                <div class="yinsP">
                    <p>服务协议的确认和接纳</p>
                </div>
            </div>
            <div class="yinsandfuw" ng-if='isPrivacy'>
                <div class="title">
                    <span ng-click='goBack()' class="jiantBack"></span>
                    隐私协议
                </div>
                <div class="yinsP">
                    <p>为说明有限公司、关联公司、或其他提供的网站、移动应用或软件上（简称“我们”）如何收集、使用和存储您的个人信息及您享有的权利，我们通过（“本政策”）向您阐述相关事宜。本政策适用于“”客户端、相关微信公众号、以及微信小程序等提供的所有产品及服务。本政策将帮助您了解以下内容：</p>
                </div>
            </div>
        </div>
	</body>
</html>

privacyAgreeController.js

app.controller('privacyAgreeController', function($scope) {
    $scope.serveAndPrivacy = true
    $scope.isServe = false
    $scope.isPrivacy = false
    //初始化
    $scope.getMount = function() {
        $scope.serveAndPrivacy = true
        $scope.isServe = false
        $scope.isPrivacy = false
    }
    //服务协议
    $scope.serveClick = function(){
        $scope.isServe = true
        $scope.serveAndPrivacy = false
        $scope.isPrivacy = false
        }

    //隐私协议
    $scope.privacyClick = function(){
        $scope.isPrivacy = true
        $scope.serveAndPrivacy = false
        $scope.isServe = false
    }

    //
    $scope.goBack = function(){
        $scope.serveAndPrivacy = true
        $scope.isPrivacy = false
        $scope.isServe = false
    }
});

css

.agreeMain{
    width: 100%;
    height: 194px;
}
.yinsandfuw{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.yinsandfuw .title{
    color: #282828;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
    font-weight:bold;
    margin-bottom: 10px;
    position: relative;
}
.yinsandfuw .title .jiantBack{
    display: inline-block;
    width: 14px;
    height: 25px;
    position: absolute;
    left: 1px;
    top: 2px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../img/fuwux.svg');
    background-size: 100% 100%;
}
.yinsandfuw .yinsP{
    flex: 1;
    overflow-y: auto;
    text-align: left;
    line-height: 25px;
    color: #282828;
    font-size: 13px;
    padding: 0;
    margin: 0;
}
.yinsandfuw .yinsP p{
    text-align: left;
    /* text-indent: 2em; */
}
.yinsandfuw .yinsP .yinsfuw{
    font-weight:normal;
    color: #0983f8;
}
/* 隐私协议弹窗 */

/* 这是这个popup的样式名，可以修改popup confim框的大小、背景色等； */
.new_confirm .popup{
    padding: 20px 25px 25px 25px !important;
    border-radius: 12px !important;
}

/* 标题样式 */
.new_confirm .popup-head{
    display: none;
}

/* 内容样式，比如字体大小等 */
.new_confirm .popup-body {
    text-align: left;
    line-height: 28px;
    color: #282828;
    font-size: 13px;
    padding: 0 !important;
    margin: 0;
}

/* 底部按钮的样式 */
.new_confirm .popup-buttons{
    width: 120px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.new_confirm .button-default{
    width: 100%;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: none;
    font-size: 10px;
    color: #909090;
    background-color: #fff !important;
    border-radius: 0;
    margin-bottom: 5px
}
.new_confirm .button-positive{
    width: 100%;
    height: 28px;
    line-height: 28px;
    background-color: #0983f8;
    border-radius: 28px;   
    text-align: center;
    border: none;
    font-size: 13px;
    color: #ffffff;
}

ionic——$ionicPopup 自定义弹窗

相关阅读

相关文章

相关问答

相关文档