Question

我想改变离子项目中特定弹出窗口的宽度，而不会对其他项目产生影响。

 var alertPopup = $ionicPopup.alert({
     cssClass: 'popupg',
      title: coe,
      template: text
    });

Answer 1

接受的答案没有解决OP所说的意思，即他们想要自定义特定弹出窗口的宽度，而不一定是所有弹出窗口的宽度。

要执行此操作，请尝试以下操作：

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

                if(val.length != 4) {
                    e.preventDefault();
                    var alertPopup = $ionicPopup.alert({
                        title: 'Invalid PIN length.',
                        template: 'Please enter a 4-digit PIN.'
                    });
                } else {
                    $scope.userRow.password = val;
                }
            }
        }
    ]
})

注意在我们实例化弹出窗口时使用'cssClass'属性。

现在在CSS中你可以做到：

.popup-pin .popup { 
  height: 60%;
  width: 80%; 
}

Answer 2

你可以像这样添加 style.css 。

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

您需要修改弹出窗口宽度。

<强>的style.css

/**
 * Popups
 * --------------------------------------------------
 */
  .popup-container .popup {
    width: 350px;
 }

想帮助你。

Answer 3

如果您使用的是Ionic 3

在您的.ts文件中：

    const alert = await this.alertCtrl.create({
        header: 'Sorry',
        cssClass: 'my-custom-alert',
        message: 'message',
        buttons: ['Find by name ?']
    });

在您的global.scss上

.my-custom-alert .alert-wrapper {
  min-width: 450px !important;
}

造型前的弹出窗口：

样式设置后的弹出式窗口（最小宽度：450像素）

我希望这个帮助：）

更改离子弹出窗口的宽度

3 个答案: