Ionic 2半高模态框：CSS类定义位置与高度设置咨询

Great questions! Let's break them down one by one:

1. Where to define the "my-modal" CSS class? #

It depends on how you plan to reuse this modal style:

• Global reuse (across multiple pages): Define it in app.scss. This way, any modal that uses the my-modal class throughout your app will pick up the styles, since app.scss acts as a global stylesheet that applies to the entire application.
• Page-specific use: You can define it in the current page's SCSS file, but you'll need to use ::ng-deep to bypass Angular's view encapsulation. That's because Ionic modals are attached to the root of the DOM (not nested inside your page component), so page-scoped styles won't reach them by default. Here's how that would look:

  ::ng-deep .my-modal {
    /* Your custom styles here */
  }
  

  Just note that ::ng-deep can leak styles to other components if not used carefully, so only go this route if the style is truly exclusive to this page's modal.

2. Can we set the modal to take half the screen height with max-height: 50%? #

Absolutely! But you'll need to target the right element in Ionic's modal structure to make it work reliably. By default, Ionic wraps modal content in a .modal-wrapper class inside your custom my-modal container. Here's the CSS you can use:

.my-modal .modal-wrapper {
  max-height: 50vh; /* Viewport height units ensure it's exactly half the screen height */
  margin: 0 auto auto auto; /* Aligns the modal to the bottom of the screen */
  /* If you want it centered vertically instead, use: */
  /* margin: auto; */
}

Using 50vh (viewport height) ensures the modal adapts to different device screen sizes perfectly. If your modal content exceeds this height, Ionic will automatically add a scrollbar to the content area, so users can still access all content without issues.

内容的提问来源于stack exchange，提问作者Noman