Question

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

我有这个弹出模板：

    <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;
}

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

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

Thankss

Answer 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 /

离子弹出窗口自定义

1 个答案: