IONIC----07.module_ionic7文档-优快云博客

本文链接：https://blog.youkuaiyun.com/damys/article/details/52052488

本文介绍了一个使用Ionic框架创建自定义弹窗的具体示例，包括如何展示定制弹出框、确认框、警告框及提示框等。通过AngularJS控制器实现不同类型的弹窗，并展示了如何响应用户的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

<script src="./lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/css/ionic.min.css">

<title>Ionic</title>
</head>

<body ng-app="myApp" ng-controller="fristController">
    <ion-header-bar class="bar-positive">
        <h1 class="title">$ionicPopup</h1>
    </ion-header-bar>

    <ion-content padding="true">
        <a class="button button-block button-calm" ng-click="showPopup();">定制弹出框/popup</a>
        <a class="button button-block button-calm" ng-click="showConfirm();">确认框/confirm</a>
        <a class="button button-block button-calm" ng-click="showAlert();">警告框alert</a>
        <a class="button button-block button-calm" ng-click="showPrompt();">提示框/prompt</a>
    </ion-content>

    <ion-footer-bar class="bar-positive">
        <h1 class="title">{{status}}</h1>
    </ion-footer-bar>
</body>
</html>

<script>
angular.module("myApp", ["ionic"])
.controller("fristController", function($scope, $ionicPopup, $timeout) {
    $scope.status = "";

    // 显示定制弹出框
    $scope.showPopup = function() {
        $scope.data = {}
        // 调用$ionicPopup弹出定制弹出框
        $ionicPopup.show({
            template: "<input type='password' ng-model='data.wifi'>",
            title: "请输入密码",
            subTitle: "密码为8位",
            scope: $scope,
            buttons: [
                { text: "取消" },
                {
                    text: "<b>保存</b>",
                    type: "button-positive",
                    onTap: function(e) {
                        return $scope.data.wifi;
                    }
                }
            ]
        })
        .then(function(res) {
            $scope.status = ["密码到手了",":",res].join(" ");
        });
    };

    // 确认弹出框
    $scope.showConfirm = function() {
        $ionicPopup.confirm({
            title: "删除信息",
            template: "你确定要删除次条信息吗？",
            okText:"OK"
        })
        .then(function(res) {
            if(res) {
                $scope.status = "已删除！";
            } else {
                $scope.status = "取消删除！";
            }
        });
    };

    //警告弹出框
    $scope.showAlert = function() {
        $ionicPopup.alert({
            title: "此文件禁止删除",
            template: "删除此文件可能会导致其它问题！"
        })
        .then(function(res) {
            $scope.status = "";
        });
    };

    //输入提示框
    $scope.showPrompt = function(){
        //todo....
        $ionicPopup.prompt({
            title: "请输入取款金额：",
            template: "取款金额将从你的银行卡扣除"
        })
        .then(function(res) {
            $scope.status = "取款成功，取款金额是："+res;
        });
    }
});
</script>

GITHUB