ionic2 How to put an element outside of modal - ionic-framework

Question

I want to add an element outside of modal using Ionic2 like the image below.
The area surrounded by blue border is the element that I want to add.
The area surrounded by red border is the custom modal that I have created.
Custom Modal.html
<ion-header>
<ion-navbar class="select-header">
<ion-buttons left (click)="close()">
<button ion-button>
<img class="close" src="assets/images/close.png"/>
</button>
</ion-buttons>
<ion-title>{{title}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="region-selection">
<div class="select-all">
<img class="selection not-selected" src="assets/images/region/check_none.png"/>
<span>{{title}}</span>
</div>
<div class="select-region">
<ion-row class="regions-row" *ngFor="let row of rowsArray; let last = last" [ngClass]="{ last: last }">
<ion-col *ngFor="let region of regions | slice:(row*3):(row+1)*3">
<img class="selection not-selected" src="assets/images/region/check_none.png"/>
<span [innerHtml]="region"></span>
</ion-col>
</ion-row>
</div>
</ion-content>

Answer 1

Try placing all your items inside the ion-content and remove the ion-header to have a structure like this
<ion-content class="region-selection">
<div class="outside-element">
<!--element outside of modal-->
</div>
<!--This is your modal header wrapper-->
<div class="modal-header">
<ion-buttons left (click)="close()">
<button ion-button>
<img class="close" src="assets/images/close.png" />
</button>
</ion-buttons>
<ion-title>{{title}}</ion-title>
</div>
<!--This is your modal header wrapper-->
<div class="modal-content">
<div class="select-all">
<img class="selection not-selected" src="assets/images/region/check_none.png" />
<span>{{title}}</span>
</div>
<div class="select-region">
<ion-row class="regions-row" *ngFor="let row of rowsArray; let last = last" [ngClass]="{ last: last }">
<ion-col *ngFor="let region of regions | slice:(row*3):(row+1)*3">
<img class="selection not-selected" src="assets/images/region/check_none.png" />
<span [innerHtml]="region"></span>
</ion-col>
</ion-row>
</div>
</div>
</ion-content>
Now you can use css to style and position the elements using the classes .outside-element , .modal-header , .modal-content
Also, make sure to set your background-color to transparent