Click Outside Modal to Close Ionic

#1

Hi !

I create a modalController with this this.modalCtrl.create(ConnexionPage).present();
But when I try to close it by tap outside it, nothing append. In fact, enableBackdropDismiss is true by default so why it doesn’t work please ?

1 Like
#2

Check with chrome debugging tools if there is a transparent area belonging to your modal where you are clicking on, that prevents the backdropDismiss

1 Like
#3

Yes there is one ! How can I remove it please ?

#4

Can you show your code please? I need the template and css.

#5
  <ion-row>
    <ion-col id='firstCol'>
      <div id=titre>
          Indiquez vos identifiants
      </div>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
        <ion-grid id='gridMiddle'>
            <form [formGroup]="form1">
              <ion-row class='rowCenter' justify-content-center>
                <ion-col class='colCenter' col-11>
                  <ion-item no-padding>
                    <ion-input #inputEmail (keyup.enter)="inputEmail.focusNext()" formControlName="email" type="email" placeholder="Adresse mail" clearInput="on" onfocus="this.placeholder=''" onblur="this.placeholder='Adresse mail'"></ion-input>
                  </ion-item>
                  <p class="errorMessage" *ngIf="submitAttempt && form1.controls.email.hasError('required')">Merci de remplir ce champ.</p>
                </ion-col>
              </ion-row>
              <ion-row class='rowCenter' justify-content-center>
                <ion-col class='colCenter' col-11>
                  <ion-item no-padding>
                    <ion-input #inputPassword type="{{type}}" placeholder="Mot de passe" formControlName="password" onfocus="this.placeholder=''" onblur="this.placeholder='Mot de passe'"></ion-input>
                    <button ion-button icon-only item-content clear (click)="showPassword()"> 
                        <ion-icon [name]="pwdIcon"></ion-icon>
                      </button>
                  </ion-item>
                  <p class="errorMessage" *ngIf="submitAttempt && form1.controls.password.hasError('required')">Merci de remplir ce champ.</p>
                </ion-col>
              </ion-row>
            </form>
            <ion-row class='rowCenter' justify-content-center>
              <ion-col class='colCenter' col-11>
                  <button ion-button id='boutonConnexion' (tap)='connexion()'>Connexion</button>
              </ion-col>
            </ion-row>
        </ion-grid>
    </ion-col>
  </ion-row>


  <ion-row id='lienBottom'>
    <ion-col>
      <ion-grid>
        <ion-row justify-content-center style='padding-top: 2rem;'>
          <ion-col>
              <a (tap)='inscription()'>Créer un compte</a>
          </ion-col>
        </ion-row>
        <ion-row justify-content-center>
            <ion-col>
                <a>Mot de passe oublié ?</a>
            </ion-col>
          </ion-row>
      </ion-grid>
    </ion-col>
  </ion-row>
#6

page-connexion {
$colorPlaceholder: black;
$fontPlaceholder: myFont;
$tailleFontTitre: 3.7rem;

/* ion-footer{
    background-color: rgb(218, 218, 218);
    height: 100%;
    border-top-right-radius: 100px;
    border-top-left-radius: 100px;
}
*/
////////////////
ion-footer{
    background-color: rgb(218, 218, 218);
    height: 90%;
}
#circleBase {
    border-radius: 50%;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 10rem;
    height: 10rem;
    background: rgb(218, 218, 218);
    
}

#iconMain{
    position: absolute;
    transform: translateX(30%); //centre l'icone dans le cercle
    top: 10px;
}
///////////

#firstCol{
    text-align: center;
    padding-top: 3rem;
}

#titre{
    color: black;
    font-size: $tailleFontTitre;
    text-align: center;
    font-weight: 500;
}

//Couleur placeholder///////////////
.text-input::-moz-placeholder {
    font-family: $fontPlaceholder;
    color: $colorPlaceholder;
    text-align: center;
}
  
.text-input:-ms-input-placeholder {
    font-family: $fontPlaceholder;
    color: $colorPlaceholder;
    text-align: center;
}
  
.text-input::-webkit-input-placeholder {
    font-family: $fontPlaceholder;
    color: $colorPlaceholder;
    text-align: center;
}
////////////////////////

.errorMessage{
    background-color: rgb(218, 218, 218);;
    color: #a83939;
    text-align: center;
    font-family: calibril;
    font-weight: bold;
}

#gridMiddle{
    height: 100%;
    padding-top: 4rem;
}

//mise en forme des inputs
ion-item{ 
    border-radius: 5px;
    height: 7rem;
}

.item-ios{ //border des inputs pour ios
    border-radius: 5px;
}

//Mise en forme du texte à l'intérieur de l'input
.text-input{
    padding-left: 4rem;
    color: black;
    text-align: center;
    font-size: 2rem;
    font-family: $fontPlaceholder;
}

//Gestion de la grille du milieu
.colCenter{
    position: initial !important; //permet de focus sur l'input quand on est dedans
    padding: 0.4rem;
}
///////////////////

.scroll-content{
    padding: 0 !important; //supprimer scroll (partie blanche bas de page) lors de l'apparition du clavier
}

#boutonConnexion{
    width: 100%;
    margin: 0;
    text-transform: none; //Permet de supprimer ls majuscules dans le boutton
    font-size: 3rem;
    height: 7rem;
    border-radius: 5px;
    background-color: rgb(93,174,184);
}

a{
    color: black;
    font-size: 2rem;
}

#lienBottom ion-col{
    text-align: center; //centre les lien en bas de la page
}

}

#7

There is my html and css thank for your help !

#8

I looked at my example. It is the modal controller, that creates the component in a ion-page frame. Maybe you have the same problem. Currently I am checking, if it is possible to resize it to the size of the content.

#9

Yes I think because the size of ion-footer is ok but when I inspect it I have a ion-page in all the page…

#10

I added ion-content above the ion-footer and registered a click event handler that calls the method close, that dismisses the modal. Works fine for me.

    <ion-content (click)="close()"></ion-content>
    <ion-footer padding>
      <ion-fab top center edge class="myfab">
        <button ion-fab icon-only color="light" mode="ios">
          <ion-icon name="logo-twitter"></ion-icon>
        </button>
      </ion-fab>
      <ion-list>
        <button ion-item (click)="close()">Close</button>
        <ion-item *ngFor="let i of items">{{ i }}</ion-item>
      </ion-list>
    </ion-footer>
2 Likes
#11

That’s work pretty well thanks !

#12

Essa é a resposta que tanto procurei :olhos do coração: muito Obrigado!!