Angulaire 2 - Ouvrir/Fermer le défaut modal bootstrap

Vous pouvez essayer quelque chose comme cela, créer 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>

ensuite, 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éer module de sorte que vous pouvez l'utiliser n'importe où et l'utiliser n'importe où, 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 aussi 🙂

OriginalL'auteur Avnesh Shakya

J'ai fait comme ça et ça fonctionne parfaitement pour moi.

var element = document.getElementById("CloseButton");

élément.cliquez sur();
D'où mon CloseButton est bootstrap bouton fermer

OriginalL'auteur Kindlebit Net

essayez d'utiliser ng-fenêtre, c'est de permettre développeur pour l'ouvrir et le plein contrôle de plusieurs fenêtres dans une seule page des applications de manière simple, Pas de Jquery, Pas de Bootstrap.

Disponible Configration

• Maxmize fenêtre
• Réduire la fenêtre
• Taille personnalisée,
• Personnalisé posation
• la fenêtre est dragable
• Bloc parent de la fenêtre ou pas
• Centre de la fenêtre ou pas
• De transmettre des valeurs aux chield fenêtre
• De transmettre des valeurs de chield fenêtre à fenêtre parent
• L'écoute de clôture chield fenêtre en fenêtre parent
• Écouter l'événement de redimensionnement avec votre écouteur personnalisé
• Ouvrir avec une taille maximale ou pas
• D'activer et de désactiver le redimensionnement de la fenêtre
• D'activer et de désactiver la maximisation
• D'activer et de désactiver la minimisation

OriginalL'auteur Bahgat Mashaly