Question

我为照片上传创建了一个自定义离子弹出窗口。我的问题是我无法使用角点关闭按钮关闭该弹出窗口。请帮帮我。

看起来像

这是我的代码

    $scope.uploadPhoto = function () {
    var confirmPopup = $ionicPopup.show({

        title: 'Upload Photo' + '<i class="ion-ios-close-outline popuoclose " ng-click="closePopup()"></i>',

        scope: $scope,
        buttons: [
            {
                text: '<i class="ion-ios-camera-outline thirty-text" ></i>',
                type: 'button-positive',
                onTap: function () {
                    $scope.takePicture();
                }
   },
            {
                text: 'Gallery',
                type: 'button-positive',
                onTap: function () {
                    $scope.galleryPicture();
                }
   },
 ]
});
  $scope.closePopup = function () {
      confirmPopup.close();
  };
};

Answer 1

以下代码适用于我：

javascript函数代码：

$scope.showPopUp= function(msg) {
     var confirmPopup = $ionicPopup.confirm({
        title: 'Upload Photo',
        template: '<center>Select Image from?</center>',
        buttons: [{
            text: 'Gallery',
            type: 'button-positive',
            onTap: function (e) {
                console.log('Gallery ' + picNumber);
                $scope.addImage(picNumber, 'G');
            }
        }, {
            text: 'Camera',
            type: 'button-positive',
            onTap: function (e) {
                console.log('Camera ' + picNumber);
                $scope.addImage(picNumber, 'C');
            }
        }, {
            text: '<i class="icon ion-close-circled"></i>',
            type: 'popupStyle',
            onTap: function (e) {

            }
        }
        ]
    })

};

CSS代码：

.popupStyle{text-align: right;position: absolute;top: 3px;right: 10px;z-index:1000;color: #029dff !important;padding: 0px !important;background-color: transparent !important; }

在您想要显示对话框的位置调用此函数。

Answer 2

让它变得简单...... 在取消按钮

buttons: [{ 
    text: '<i class="icon ion-close-circled"></i>',
    type:'popclose',
    onTap: function(e) {

    }
}],

并在Css中添加课程

.popclose {
     text-align: right;
     position: absolute;
     top: 3px;  // Change the value as per requirement;
     right: -4px; // Change the value as per requirement;
     z-index:1000;
     color: #029dff !important;
     padding: 0px !important;
     background-color: transparent !important; 
}

Answer 3

很可能是由于您的ng-click="closePopup()"未编译。

看一下this stackoverflow post来解决问题。

Answer 4

我有一个类似的问题，这就是我如何解决它。

使用TemplateUrl参数，我传入了一个组成弹出框体的HTML模板。我在这里包含了标签，然后使用top：0;右：0; （通过小调整）获取弹出窗口右上角的图标。通过TemplateUrl参数传入它，ng-click可以正确编译。

Answer 5

使用“模板”代替“标题”。并调整此属性的CSS，使其等于标题。

离子弹出窗口中的自定义关闭按钮

5 个答案: