web-dev-qa-db-fra.com

Angular 2 - Open/Close modal bootstrap par défaut

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. 

  • L’affichage est basculé entre display: none; et display: block;
  • Un attribut bascule sur la 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
angulartypescriptbootstrap-modal
16
Ivar Reukers

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 :)

13
Avnesh Shakya

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

6
Fernando Siqueira

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

5
Kindlebit Net

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.

1
Ivar Reukers

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.

 enter image description here

Configration possible

  • Agrandir la fenêtre
  • Réduire la fenêtre
  • Format personnalisé,
  • Position personnalisée
  • la fenêtre est glissable 
  • Bloquer la fenêtre parent ou non
  • Centrer la fenêtre ou pas
  • Passer des valeurs à la fenêtre de bouclage 
  • Transmettre les valeurs de la fenêtre chield à la fenêtre parent
  • Écoute de la fermeture de la fenêtre chield dans la fenêtre parente
  • Écoutez pour redimensionner un événement avec votre auditeur personnalisé
  • Ouvert avec taille maximum ou pas
  • Activer et désactiver le redimensionnement de la fenêtre
  • Activer et désactiver la maximisation
  • Activer et désactiver la minimisation
0
Bahgat Mashaly