Nie można zmienić określonej wysokości lub szerokości modala. Teraz opiszę rozwiązanie, którego używam do zmiany rozmiaru mojego modalu.
- Upewniono się, że cała wysokość i szerokość modalu powinna wynosić 100%. Jako jonowy zmieniają rozmiar modalny dla urządzeń z dużym ekranem. Dlatego dodałem poniżej kod w
app.scss
.
modal-wrapper {
position: absolute;
width: 100%;
height: 100%;
}
@media not all and (min-height: 600px) and (min-width: 768px) {
ion-modal ion-backdrop {
visibility: hidden;
}
}
@media only screen and (min-height: 0px) and (min-width: 0px) {
.modal-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
- Teraz w jonowej zawartości wykonujemy dwa div i tło jonów treści powinny być przejrzyste (patrz
main-view
klasę css). Teraz, jeden element div jest używany dla tła modala, to będzie używać jako tła (zobacz overlay
klasa css). Kolejny element div powinien zostać użyty dla zawartości, zmienimy rozmiar tego elementu div (zob. modal-content
klasa css). W przykładzie zmieniam rozmiar do 50%. Przykładowe html ans kod css znajduje się poniżej,
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% - (50%/2));
left: 0;
right: 0;
width: 100%;
height: 50%;
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;
}
}
<ion-content class="main-view">
<div class="overlay" (click)="dismiss()"></div>
<div class="modal_content">
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs, update any existing page or create new
pages.
</p>
</div>
</ion-content>
Oto zrzut ekranu z modalnym,
Jeśli chcesz modal zawartość powinna przewijać następnie zamień <div class="modal_content">
na <ion-scroll class="modal_content" scrollY="true">
zgodnie z informacją podaną przez Missak Boyajian w comment
Dla Ionic3 trzeba this komentarzem Alston Sahyun Kim.
this is an excellent answer, just one thing from ionic3, .main-view{ background: transparent; } should be .content{ background: transparent; }
Cały kod jest pobierana z here. Myślę, że pomoże ci repozytorium this project.
Czy próbowałeś zmienić rozmiar zawartości jonów na swojej stronie modalnej? – JoeriShoeby