使用模态和样式的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.

我已经正确设置了一个模态,我可以毫无问题地解决它,但我的问题是它需要整个页面,我只是希望它像图片一样。

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 :

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

}

My mistake is probably between html and css

我的错误可能是在html和css之间

4 个解决方案

#1

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

#2

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

我得到它finnaly,我没有选择正确的属性。

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

#3

check this fiddle

检查这个小提琴

its in ionic1 but css is same

它在离子1中但css是相同的

style="background: rgba(0,0,0,0.5);
position: absolute;
top: 80px;
left: 45px;
display: block;
width: 70%;
height: 62%;"

change values as needed

根据需要更改值

#4

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。这是因为当有两个离子含量标签时离子会混淆。

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.

在这种情况下,父项中有一项,子项模式中有一项。所以最好把它从儿童模态中拿出来。其余代码保持不变。

#1