Ionic 2 Modal tworzą 50% szerokości

Question

Mam stronę w mojej aplikacji jonowej, która po kliknięciu przycisku otwiera stronę modalną. Obecnie przesłoniłem zmienną.scss do kodu poniżej, aby model pokrył 100% strony.

//for Modals 
$modal-inset-height-large: 100%; 
$modal-inset-height-small: $modal-inset-height-large; 
$modal-inset-width: 100%; 

Jednak dotyczy to wszystkich modeli w mojej aplikacji. Chcę używać niektórych modeli na innych stronach, które wykorzystują 50% szerokości i około 80% wysokości. Jak mogę dostosować moje formanty?

Answer 1

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.

1. 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%; 
 
    } 
 
}

2. 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.