使用模态和样式的 Ionic 2 登录弹出窗口

问题描述

我有一个项目，我想在其中使用这种类型的登录:

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模板网！