1
votes

Après la connexion réussie, comment masquer la fenêtre contextuelle

Si la connexion réussit, je souhaite fermer ma popup automatiquement. Ce que j'ai écrit le code est indiqué ci-dessous. Mais ça ne fonctionne pas. Quelqu'un peut-il s'il vous plaît aider.

Mon html

import * as $ from 'jquery';
funlogin(){
///If(login==true){
$("#myModal").dialog("close")
}else{
alert(login failed)
}

Mes ts

    <div class="modal fade" id="myModal">
<button type="button" class="close" data-dismiss="modal">&times;</button>
      <div class="modal-dialog">
        <div class="modal-content" >
        <input id="login-username" type="text" class="form-control" name="username">
        <input id="login-username" type="text" class="form-control" name="password">
        <input type="button" id="btn-login" class="btn btn-success" (click)="funlogin()">Login  </button>
        </div>
    </div>
    </div>

angular

0 commentaires

4 Réponses :

0
votes

Utilisez la méthode modale ('hide'):

funlogin(){
    if(login==true){
       $("#myModal").modal('hide');
    }else{
      alert(login failed)
    }
}

3 commentaires

Il dit -----> jquery__WEBPACK_IMPORTED_MODULE_7 __ (...). Modal n'est pas une fonction. J'ai déjà importé ceci -------> import * comme $ de 'jquery'

Avez-vous inclus bootstrap? Je pensais que tu en avais besoin

Oui, j'ai également inclus jquery et bootstrap.

1
votes

Pourquoi n'utilisez-vous pas une directive pour atteindre ce comportement?

Jquery est totalement inutile ici. Vous pouvez utiliser votre composant angulaire pour gérer le modal et le montrer s'il peut être nécessaire ou le masquer si ce n'est pas le cas. En outre, en gérant ce comportement depuis le composant / vue parent, vous évitez les éléments inutiles dans le DOM

<modal *ngIf="!isLoggedIn">

</modal>

public isLoggedIn = false;


funlogin(){
  this.isLoggedIn = true
}

0 commentaires

1
votes

Essayez avec une bascule comme: $ ("# myModal"). dialog ("toggle")

1 commentaires

Il dit -----> jquery__WEBPACK_IMPORTED_MODULE_7 __ (...). Dialog n'est pas une fonction. J'ai déjà importé ceci -------> import * comme $ de 'jquery';

0
votes

vous pouvez également créer une fenêtre contextuelle sans utiliser jquery. Vous pouvez essayer le bootstrap angulaire.

@ ng-bootstrap / ng-bootstrap

npm install @ ng-bootstrap / ng-bootstrap --save

<ng-template #loginModal let-modal >
  <span class="modalClose" (click)="modal.dismiss('Cross click')"></span>
  <div class="modal-body" style="text-align:center">
    It is login Modal
    <input id="login-username" type="text" class="form-control" name="username">
    <input id="login-password" type="password" class="form-control" name="password">
    <button (click)="loginAction()">Login</button>
  </div>
</ng-template>

sample.component.ts

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

constructor(private modalService: NgbModal){}

loginAction() {
  if(login.status == 'success') {
     this.modalService.dismissAll();
  }
}

sample.component.html

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
 declarations: [],
 imports: [NgbModule]
 })

 export class SampleModule { }

0 commentaires