Ionic：如何改变 $ionicPopup 的宽度？答案

【问题标题】：Ionic: How is it possible to change the width of $ionicPopup?Ionic：如何改变 $ionicPopup 的宽度？
【发布时间】：2017-09-29 03:01:34
【问题描述】：

我正在尝试更改 $ionicPopup 的宽度；我尝试使用以下 css 代码将其导入到cssClass: my-popup：

.my-popup {
      width: 400;
      }

但这似乎不起作用。

我真的陷入了困境，目前无法找到解决方案。

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： css ionic-framework ionic-popup

【解决方案1】：

将以下内容放在 src/theme/variables.scss 文件中；

$popover-ios-width: 300px;

【讨论】：

【解决方案2】：

其实很简单，看下面的例子：

var pinPopup = $ionicPopup.show({
    templateUrl : 'app/user-profile/user-pin.html',
    title: '4-digit Security PIN',
    scope : $scope,
    cssClass: 'my-popup',
    buttons : [
        {
            text : 'Cancel',
        },
        {
            text : '<b>Save</b>',
            type: 'button-positive',
            onTap : function(e) {
                var val = document.getElementById('pin-output').value;
                $scope.userRow.password = val;
            }
        }
    ]
})

现在在你的 CSS 中简单地做：

.my-popup .popup {
  width: 400px;
}

【讨论】：

我认为这个解决方案比公认的解决方案更准确，因为它不会改变应用程序中所有弹出窗口的宽度。