問題描述

我有一個項目，我想在其中使用這種類型的登錄:

I have a projet where i want to use this type of login :

我已經正確設置了一個模式，我可以毫無問題地關閉它，但我的問題是它占據了整個頁面，我只是希望它與圖片中一樣.

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.

我不知道如何選擇 css 文件中的所有頁面，已嘗試使用 * 但它與 html 文件中的內容混淆了太多.

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.

提前謝謝你！

打開模態頁面的代碼:

  showLogin() {
let modal = this.modalCtrl.create(LoginPage);
// this.navCtrl.push(modal);
modal.present();
}

模態代碼:HTML:

<ion-navbar class="modal-wrapper" *navbar>
  <ion-title>Sample Modal</ion-title>
</ion-navbar>
<ion-content padding class="sample-modal-page">
  <p>my sample modal page<p>
     <ion-buttons start>
        <button (click)="dismiss()">
          Cancel
        </button>
      </ion-buttons>
</ion-content>

CSS:

page-login {
    .modal-wrapper {
        padding: 30px;
        background: rgba(0,0,0,0.5);
    }
}

TS:

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);
  }

}

我的錯誤可能在html和css之間

My mistake is probably between html and css

推薦答案

我終于明白了，我沒有選擇正確的屬性.

I got it finnaly, i was not selecting the right attribute.

這里有什么效果:

page-login {
    .sample-modal-page {
        padding: 30px;
        background: rgba(0,0,0,0.5);
    }
}

感謝 varun aaruru 幫助我，感謝他為出色的編輯提供的所有特點

Thank you to varun aaruru for helping me and all the caracteristic he gave for nice editing

在這里您還可以找到一篇很好的帖子，討論如何設計它:https://forum.ionicframework.com/t/custom-modal-alert-with-html-form/47980/19

here you can also find a nice post talking about how to nicely design it : https://forum.ionicframework.com/t/custom-modal-alert-with-html-form/47980/19

這篇關于使用模態和樣式的 Ionic 2 登錄彈出窗口的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！