离子弹出自定义答案

【问题标题】：Ionic popup customize离子弹出自定义
【发布时间】：2016-11-17 03:10:27
【问题描述】：

我正在尝试修改弹出窗口的大小。但我没有成功。

我有这个弹出模板：

    <ion-view>
        <ion-content scroll="false" class="">
            test
        </ion-content>
    </ion-view>

在我的控制器中：

$scope.openFilter = function() {
    var popupFilter = $ionicPopup.prompt({
          templateUrl: 'templates/popup-template-filter.html',
          scope: $scope
    })

    $scope.close = function() {
      popupFilter.close();
    }
  }

在我的 Sass 中，我尝试了这个并且成功了：

.popup {  
     width: 100% !important; 
     height: 180px !important; 
     position: fixed !important;
     bottom: 0 !important;
}

但是我的项目中有多个弹出窗口，我想单独修改。

我的第二个问题是如何关闭弹出窗口？我找到了示例，但没有一个带有可自定义模板的弹出窗口

谢谢

【问题讨论】：

标签： javascript angularjs ionic-framework popup

【解决方案1】：

在这篇文章中，您可以声明 css Master Class 来单独修改您的弹出窗口：

Ionic: how to use cssClass in $ionicPopup?

你只需要这样做：

 .my-custom-popup{
   .popup{
    //styling for popup width, width: 300px;
   }
   .popup-title{
     //styling for title
   }
 }

然后是这个：

 var popupScore = $ionicPopup.alert({

  title:'Score',
  template: 'Total XP points: 50',
  cssClass: 'my-custom-popup',
  buttons: [{
  text:'Return',
  type: 'button-assertive'
}]}}

希望对你有帮助！

pd。在文档中，它显示了您可以添加到弹出窗口中的所有属性，包括这个自定义 css 类：

https://ionicframework.com/docs/api/service/$ionicPopup/

【讨论】：