Блог

Главная - Вопросы по программированию - Изменить ширину ионного всплывающего окна

Изменить ширину ионного всплывающего окна

#html #css #ionic-framework #popup

#HTML #css #ionic-framework #всплывающее окно

Вопрос:

я хочу изменить ширину определенного всплывающего окна в моем ионном проекте, не оказывая влияния на другие.

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

Комментарии:

1. Я забыл упомянуть код css: .popupg { ширина: 80% !важно; высота: 60% !важно; }

Ответ №1:

если вы используете Ionic 3

в вашем файле .ts :

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

на вашем глобальном.scss

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

всплывающее окно перед стилизацией :
введите описание изображения здесь

всплывающее окно после стилизации (минимальная ширина: 450 пикселей)

введите описание изображения здесь

я надеюсь, что это поможет 🙂

Ответ №2:

Принятый ответ не касается того, что сказал 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%; 
}

Ответ №3:

вы можете добавить 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;
 }

хочу вам помочь.