CSS 使用模态和样式的 Ionic 2 登录弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42695169/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic 2 login popup using Modal and styling
提问by foufrix
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.
我已经正确设置了一个模态，我可以毫无问题地关闭它，但我的问题是它占用了整个页面，我只希望它如图所示。
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.
我不知道如何选择 css 文件中的所有页面，已经尝试过 * 但它与 html 文件中的内容混淆了太多。
thank you in advance !
先感谢您 ！
Edit :
编辑 ：
code on the page that open the modal :
打开模态的页面上的代码：
showLogin() {
let modal = this.modalCtrl.create(LoginPage);
// this.navCtrl.push(modal);
modal.present();
}
code of the modal : HTML :
模态代码：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 :
CSS :
page-login {
.modal-wrapper {
padding: 30px;
background: rgba(0,0,0,0.5);
}
}
TS :
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);
}
}
My mistake is probably between html and css
我的错误可能是在 html 和 css 之间
采纳答案by foufrix
I got it finnaly, i was not selecting the right attribute.
我终于明白了，我没有选择正确的属性。
Here what worked :
这里有什么工作：
page-login {
.sample-modal-page {
padding: 30px;
background: rgba(0,0,0,0.5);
}
}
Thank you to varun aaruru for helping me and all the caracteristic he gave for nice editing
感谢 varun aaruru 帮助我以及他为出色编辑提供的所有特征
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
在这里你还可以找到一篇很好的帖子，讨论如何很好地设计它：https: //forum.ionicframework.com/t/custom-modal-alert-with-html-form/47980/19
回答by RodolfoSilva
My solution to this:
我对此的解决方案：
import { Renderer } from '@angular/core';
import { ModalController, NavParams, ViewController } from 'ionic-angular';
@Component(...)
class HomePage {
constructor(
public modalCtrl: ModalController
) { }
presentProfileModal() {
let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
profileModal.present();
}
}
@Component(...)
class Profile {
constructor(
params: NavParams,
public renderer: Renderer,
public viewCtrl: ViewController
) {
this.renderer.setElementClass(viewCtrl.pageRef().nativeElement, 'my-popup', true);
console.log('UserId', params.get('userId'));
}
}
Add this to your scss:
将此添加到您的 scss：
ion-modal.my-popup {
@media (min-width: 300px) and (min-height: 500px) {
ion-backdrop {
visibility: visible;
}
}
.modal-wrapper {
position: absolute;
overflow: hidden;
max-width: 280px;
border-radius: 2px;
width: 80vw;
height: 50vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 0;
box-shadow: 0 16px 20px rgba(0,0,0,.4);
background-color: #fafafa;
}
}
Or this css, which will propose dynamic height:
或者这个 css，它将提出动态高度：
ion-modal.my-popup {
@media (min-height: 500px) {
ion-backdrop {
visibility: visible;
}
}
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $z-index-overlay;
display: flex;
align-items: center;
justify-content: center;
contain: strict;
.modal-wrapper {
&,
.ion-page,
.ion-page .content,
.ion-page .content .scroll-content {
contain: content;
position: relative;
top: auto;
left: auto;
}
z-index: $z-index-overlay-wrapper;
display: flex;
overflow: hidden;
flex-direction: column;
min-width: $alert-min-width;
max-height: $alert-max-height;
opacity: 0;
height: auto;
max-width: $alert-md-max-width;
border-radius: $alert-md-border-radius;
background-color: $alert-md-background-color;
box-shadow: $alert-md-box-shadow;
.ion-page .content {
background-color: color($colors, light);
}
}
}
I just set a class to modal element when it is called and change the style.
我只是在调用时将一个类设置为模态元素并更改样式。
- The modal implementation source is based in the official API ModalController
- 模态实现源码基于官方API ModalController
回答by varun aaruru
回答by Gagarhymes
For Modal to show up in partial screen, you'll have to remove the ion-content tag and replace with a div. This is because ionic gets confused when there are two ion-content tags.
要在部分屏幕中显示 Modal，您必须删除 ion-content 标签并替换为 div。这是因为当有两个 ion-content 标签时 ionic 会混淆。
In this case there is one in the parent and one in the child modal. So its best to take it out of the child modal. Rest of the code remains same.
在这种情况下，父模式中有一个，子模式中有一个。所以最好把它从子模式中取出来。其余代码保持不变。
