Je ne souhaite pas utiliser angular2-bootstrap ou ng2-bs3-modal comme suggéré dans les questions/réponses Angular 2 Bootstrap Modal et Angular 2.0 et Modal Dialog
À présent. Je sais ce qui ouvre et ferme le modal bootstrap.
display: none;
et display: block;
div
entre aria-hidden="true"
et aria-hidden="false
Alors naturellement, je pensais que si je me liais à l'attribut aria-hidden
comme so [aria-hidden]="true"
, je pourrais le manipuler. Malheureusement, je ne peux pas me lier à aria-hidden
car ce n'est pas une propriété connue de div
. (note, attr.aria-hidden
n'existe pas)
Je sais que cela est possible avec JQuery avec $('#myModal').modal()
comme indiqué dans cette question Comment ouvrir une fenêtre modale Bootstrap avec jQuery?
Ma question est donc la suivante: existe-t-il une fonctionnalité TypeScript faisant la même chose que modal()
de JQuery ou existe-t-il un moyen de lier une fonction/variable à aria-hidden
?
Ma html
actuelle:
<div id="createAccountModal" class="modal fade customForm" role="dialog" [aria-hidden]="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Create account</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum</P>
</div>
<div class="modal-footer align-left">
My custom footer
</div>
</div>
</div>
</div
Vous pouvez essayer quelque chose comme ceci, créez myModal.html
:
<div class="modal-backdrop fade in" [style.display]="showModal ? 'block' : 'none'"></div>
<div class="modal" tabindex="-1" role="dialog" style="display: block" [style.display]="showModal ? 'block' : 'none'">
<div class="modal-dialog">
<div class="modal-popup">
<div class="popup-title">
<span>{{title}} </span>
<i class="icon-cancel fr" data-dismiss="modal" aria-label="Close" (click)="cancelAction()"></i>
<p *ngIf="subTitle">{{subTitle}}</p>
</div>
<ng-content></ng-content>
</div>
</div>
</div>
puis, créez myModal.component.ts
:
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
const template: string = require('./myModal.html');
@Component({
selector: 'modal',
template
})
export class Modal implements OnInit {
@Input('show-modal') showModal: boolean;
@Input('title') title: string;
@Input('sub-title') subTitle: string;
@Input('cancel-label') cancelLabel: string;
@Input('positive-label') positiveLabel: string;
@Output('closed') closeEmitter: EventEmitter < ModalResult > = new EventEmitter < ModalResult > ();
@Output('loaded') loadedEmitter: EventEmitter < Modal > = new EventEmitter < Modal > ();
@Output() positiveLabelAction = new EventEmitter();
constructor() {}
ngOnInit() {
this.loadedEmitter.next(this);
}
show() {
this.showModal = true;
}
hide() {
this.showModal = false;
this.closeEmitter.next({
action: ModalAction.POSITIVE
});
}
positiveAction() {
this.positiveLabelAction.next(this);
return false;
}
cancelAction() {
this.showModal = false;
this.closeEmitter.next({
action: ModalAction.CANCEL
});
return false;
}
}
export enum ModalAction { POSITIVE, CANCEL }
export interface ModalResult {
action: ModalAction;
}
puis créez module pour que vous puissiez utiliser n'importe où et l'utiliser partout comme ceci:
<modal #deleteUserModal id="deleteUser"
[show-modal]="isModalOpen"
[title]="'Delete'"
>
<div class="popup-content">
<p>Are you sure you want to delete the user permanently?</p>
</div>
<div class="popup-footer">
<button class="btn cancel" aria-label="Close" (click)="deleteUserModal.hide()">
Cancel
</button>
<button type="button" class="btn btn-primary" (click)="deleteSelectedUser(deleteUserModal)" aria-label="Close">
Delete
</button>
</div>
</modal>
Vous pouvez améliorer cela aussi :)
si votre modal a un bouton d'annulation (sinon créez un bouton de fermeture caché). Vous pouvez simuler l'événement click sur ce bouton pour que votre formulaire soit fermé . Dans votre composant, ajoutez un ViewChild
export class HelloComponent implements OnInit {
@ViewChild('fileInput') fileInput:ElementRef;
dans votre bouton de fermeture, ajoutez #fileInput
<button class="btn btn-danger" #fileInput id="delete-node" name="button" data-dismiss="modal" type="submit">Cancelar</button>
Lorsque vous souhaitez fermer le modal, déclenchez par programme un événement de clic sur le bouton de fermeture.
this.fileInput.nativeElement.click();
Pour ouvrir, vous pouvez utiliser la même idée
J'ai fait comme ça et ça marche parfaitement pour moi.
var element = document.getElementById ("CloseButton") comme n'importe quel;
element.click (); Où mon CloseButton est un bouton de fermeture de bootstrap
Ok, il n’est pas nécessaire de se lier à aria-hidden
bien que cela soit possible, je suppose.
La réponse actuelle vient de Angular 2.0 et Modal Dialog (mais une réponse avec seulement 9 votes positifs)
Ajouter
<div id="createAccountModal" class="modal fade customForm" role="dialog" [ngClass]="{'in': visibleAnimate}"
[ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
Ceci dans mon code, et le fait d'avoir un gestionnaire (click)
sur un bouton bascule les variables visible
et visibleAnimate
pour répondre à mes besoins.
essayez d'utiliser ng-window, il permet au développeur d'ouvrir et de contrôler totalement plusieurs fenêtres dans des applications à une seule page de manière simple, sans Jquery, ni Bootstrap.
Configration possible