使用模态和样式的Ionic 2登录弹出窗口 [英] Ionic 2 login popup using Modal and styling
问题描述
我有一个项目,我想使用这种类型的登录:
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.
提前谢谢!
编辑:
页面上的代码打开模态:
code on the page that open the modal :
showLogin() {
let modal = this.modalCtrl.create(LoginPage);
// this.navCtrl.push(modal);
modal.present();
}
模态代码:
HTML:
code of the modal : 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登录弹出窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!