title: Ionic 2 login popup using Modal and styling
body: <p>I have a projet where i want to use this type of login :</p>
  
  <p><a href="https://i.stack.imgur.com/EjwfM.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/EjwfM.jpg" alt="enter image description here"></a></p>
  
  <p>I have set up a modal correctly and i can dismiss it with no problem, but my problem is that it take the entire page, and i just want it to be as in the picture.</p>
  
  <p>I don't know how to select all page in css file, already tried with * but it messing too much with what is inside the html file.</p>
  
  <p>thank you in advance !</p>
  
  <p>Edit : </p>
  
  <p>code on the page that open the modal : </p>
  
  <pre><code>  showLogin() {
  let modal = this.modalCtrl.create(LoginPage);
  // this.navCtrl.push(modal);
  modal.present();
  }
  </code></pre>
  
  <p>code of the modal : 
  HTML :</p>
  
  <pre><code>&lt;ion-navbar class="modal-wrapper" *navbar&gt;
    &lt;ion-title&gt;Sample Modal&lt;/ion-title&gt;
  &lt;/ion-navbar&gt;
  &lt;ion-content padding class="sample-modal-page"&gt;
    &lt;p&gt;my sample modal page&lt;p&gt;
       &lt;ion-buttons start&gt;
          &lt;button (click)="dismiss()"&gt;
            Cancel
          &lt;/button&gt;
        &lt;/ion-buttons&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>page-login {
      .modal-wrapper {
          padding: 30px;
          background: rgba(0,0,0,0.5);
      }
  }
  </code></pre>
  
  <p>TS :</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController, NavParams, ViewController } from 'ionic-angular';
  
  @Component({
    selector: 'page-login',
    templateUrl: 'login.html'
  })
  export class LoginPage {
  
    constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {}
  
    dismiss(data) {
      this.viewCtrl.dismiss(data);
    }
  
  }
  </code></pre>
  
  <p>My mistake is probably between html and css</p>