Question

我有一个项目，我想使用这种类型的登录：

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

我不知道如何选择css文件中的所有页面，已经尝试了*但是它对html文件中的内容搞得太多了。

提前谢谢你！

编辑：

打开模态的页面上的

代码：

  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之间

Answer 1

我的解决方案：

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

}

将此添加到您的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;
  }
}

或者这个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);
    }
  }
}

我只是在调用时将类设置为模态元素并更改样式。

模态实现源基于官方API ModalController

Answer 2

我得到了它，我没有选择正确的属性。

这是有效的：

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

感谢varun aaruru帮助我和他为编辑提供的所有特色

在这里你也可以找到一篇很好的帖子，谈论如何很好地设计它： https://forum.ionicframework.com/t/custom-modal-alert-with-html-form/47980/19

Answer 3

检查此fiddle

它在ionic1中但css是相同的

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

根据需要更改值

Answer 4

要使Modal显示在部分屏幕中，您必须删除ion-content标记并替换为div。这是因为当有两个离子含量标签时离子会混淆。

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

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

4 个答案: