如何在ionic 3中更改模态的高度和宽度答案

【问题标题】：how to change the height and width of an modal in ionic 3如何在ionic 3中更改模态的高度和宽度
【发布时间】：2017-12-30 21:43:44
【问题描述】：

我希望将模型用作警报。

这是我尝试过的

presentModal() {
    const myModelOpts: ModalOptions = {
      // showBackdrop: false,
      enableBackdropDismiss: false
    }
    const myData = {
      pageName: "home"
    }
    let modal = this.modalCtrl.create(ModelPage, { data: myData}, myModelOpts);
    modal.present();
  }

我正在获取模型页面，但我无法调整模型的高度和宽度并显示背景。

我也试过申请

$modal-inset-min-width:500px

在我的 variable.scss 和 app.scss 但它不起作用

我怎样才能使用这个$modal-inset-min-width 或者有没有其他方法可以实现这个

这是我的图片，没有任何设备模式

这是我在移动设备模式下的图像

我想要移动设备模式下的第一个图像类型

【问题讨论】：

您要更改应用程序中特定模态或所有模态的高度和宽度吗？
我想更改的特定模式@Math10
你能看到this的答案吗？我认为你需要这个解决方案。
请检查我更新的问题@Math10
我应该假设您总是想要相同百分比的宽度和高度吗？（假设宽度 = 70%，高度 = 80%）

标签： angular sass ionic2 ionic3

【解决方案1】：

查看 Modal Controller 的文档，他们也躲过了高级中的 cssClass。
这并不完全有启发性..
所以我查看了class的来源
它传入 opts：ModalOptions = {} ..
源代码显示它是一个界面，因此您应该能够做到cssClass?: string;。
因此，您可以尝试创建自己的 CSS 样式并将其链接到您的 myModelOpts 变量中......

【讨论】：

在同一个模态控制器 api 中，我们有一些类似 Sass Variables 的东西，并给出了一些选项，我们可以全局更改或创建一个 sass 文件并导入到我们的特定页面中

【解决方案2】：

第一次看到这个solution。

现在您需要将modal_content css 更改为您期望的宽度和高度。将 YOUE_EXPECTED_HEIGHT 和 YOUE_EXPECTED_WIDTH 更改为您预期的高度和宽度百分比。

page-about {
  .main-view{
    background: transparent;
  }
  .overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: .5;
    background-color: #333;
  }
  .modal_content {
    position: absolute;
    top: calc(50% - (YOUE_EXPECTED_HEIGHT/2));
    left: 0;
    right: 0;
    width: YOUE_EXPECTED_WIDTH;
    height: YOUE_EXPECTED_HEIGHT;
    padding: 10px;
    z-index: 100;
    margin: 0 auto;
    padding: 10px;
    color: #333;
    background: #e8e8e8;
    background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
    background: linear-gradient(to bottom, #fff 0%, #e8e8e8 100%);
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(51, 51, 51, .35);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
  }
}

【讨论】：