0

I'm using Ionic2, I want to set modal to the center of the page and when clicking to open modal I want the other page opacity to be 0.7 and when clicking anywhere the modal dismiss, this is my Html code:

<ion-header>
<ion-navbar color="dark">
    <button ion-button icon-only menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>Product</ion-title>
    <ion-buttons end mode="md" (click)="sharePost()">
        <button ion-button icon-only no-padding no-margin>
            <ion-icon name="md-share"></ion-icon>
        </button>
    </ion-buttons>

</ion-navbar>

</ion-header>


<ion-content id="body" (click)="closeModal()">

</ion-content>

the .ts

import { ReviewPage } from '../review/review';
import { DescriptionPage } from '../description/description';
import { Component, ViewChild } from '@angular/core';
import { ModalController, NavController, NavParams, PopoverController, 
ViewController } from 'ionic-angular';
import { ShareOptionsPage } from '../share-options/share-options';

@Component({
 selector: 'page-product',
 templateUrl: 'product.html',
})
export class ProductPage {

contactModal;
firstViewCtrl;

constructor(public modalCtrl: ModalController,public navCtrl: 
 NavController, public navParams: NavParams,public popoverCtrl: 
 PopoverController,public viewCtr:ViewController) {
}

sharePost() {
 this.contactModal = this.modalCtrl.create(ShareOptionsPage, 
  {showBackdrop: true, enableBackdropDismiss: true});
 this.contactModal.present();
 this.firstViewCtrl = this.navCtrl.first();
}

closeModal() {

 if(this.contactModal != null) {
  this.firstViewCtrl.dismiss()
 }
}
}

but it doesn't work, what should I do?

1 Answer 1

2

if you meant how to dismiss the modal from another page then you can inject ViewController inside the modal page or another page (private viewCtrl: ViewController) then call viewCtrl.dismiss()

if you meant on how to change the opacity then in the modal options you can set a css class which you define yourself.

Hope that helps.

3
  • yes, but If I use viewCtrl.dismiss() in the product page it dismiss the product page itself not the modal, I want to dismiss the modal if I click in any place in the product page because the is open to the middle of the page Commented Aug 28, 2017 at 7:26
  • enableBackdropDismiss in the modal options should handle this Commented Aug 29, 2017 at 10:54
  • @minigeek instead of editing, even if your change is an actual improvement, I suggest writing another answer. It is always better to avoid conflicts with original author's intents. Commented May 4, 2020 at 14:19

Not the answer you're looking for? Browse other questions tagged or ask your own question.