kątowa 2 - Open/Close domyślny bootstrap modalne

Question

Nie chcę używać angular2-bootstrap lub ng2-bs3-modal jak sugeruje pytania/odpowiedzi Angular 2 Bootstrap Modal i Angular 2.0 and Modal Dialog

teraz. Wiem, co otwiera i zamyka mod bootstrap.

• Wyświetlacz przełączany jest między display: none; i display: block;
• atrybut przełącza na div między aria-hidden="true" i aria-hidden="false

Więc, oczywiście myślałem, że jeśli związany z aria-hidden atrybutów jak tak [aria-hidden]="true", że mogę nim manipulować. Niestety, nie mogę powiązać z aria-hidden, ponieważ nie jest to znana właściwość div. (Uwaga, attr.aria-hidden nie istnieje)

wiem, że jest to możliwe z JQuery z $('#myModal').modal() jak pokazano w tym pytaniu How to open a Bootstrap modal window using jQuery?

Więc moje pytanie brzmi, czy istnieje funkcjonalność maszynopis, który robi to samo, co modal() z JQuery, czy istnieje sposób na powiązanie funkcji/zmiennej z aria-hidden?

mojego obecnego html:

<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 

Answer 1

Można spróbować coś takiego stworzyć 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> 

Następnie utwórz 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; 
} 

następnie utworzyć moduł do tego, aby można było używać w dowolnym miejscu i używać go w dowolnym miejscu tak:

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

Możesz to również poprawić :)

Answer 2

Ok, okazuje się, że nie ma potrzeby, aby związać się aria-hidden choć powinno to być możliwe, tak myślę.

Obecny Odpowiedź przyszła od Angular 2.0 and Modal Dialog (ale odpowiedź tylko 9 upvotes)

Dodawanie

<div id="createAccountModal" class="modal fade customForm" role="dialog" [ngClass]="{'in': visibleAnimate}" 
     [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}"> 

to do mojego kodu, a mający (click) obsługi na przycisk przełączania visible i visibleAnimate nadaje moje potrzeby.

Answer 3

spróbuj użyć ng-okna, to pozwala programistom otwierać i kontrolować wiele okien w pojedynczych aplikacjach w prosty sposób, bez jquery, bez bootstrapu.

Dostepne Configration

okno

• Maxmize
• zminimalizować okno
• Rozmiar niestandardowy,
• klienta posation
• okno jest dragable
• okna nadrzędnego bloku lub nie
• Centrum okno czy nie
• wartości podaje do chield okno
• wartości podanie od chield okna do okna nadrzędnego
• Słuchanie zamykania chield okna w okna nadrzędnego
• Słuchaj, aby zmienić rozmiar zdarzenia ze swoim zwyczajem słuchacz
• Otwórz w maksymalnym rozmiarze lub nie
• Włączanie i wyłączanie zmiany rozmiaru okna
• włączać i wyłączać maksymalizacja
• włączać i wyłączać minimalizacja

Answer 4

jeśli modalne posiada przycisk Cancel (W przeciwnym razie utwórz ukryty przycisk zamykania). Możesz symulować zdarzenie kliknięcia na tym przycisku, aby formularz został zamknięty. wW komponentu dodać ViewChild

export class HelloComponent implements OnInit { 

@ViewChild('fileInput') fileInput:ElementRef; 

w ścisłej przycisk dodać #fileInput

<button class="btn btn-danger" #fileInput id="delete-node" name="button" data-dismiss="modal" type="submit">Cancelar</button> 

Gdy chcesz zamknąć modal programowo wywołać zdarzenie kliknij na przycisk Zamknij

this.fileInput.nativeElement.click(); 

Aby otworzyć możesz skorzystać z tego samego pomysłu

Answer 5

Zrobiłem tak i to działa dla mnie doskonale.

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

element.click(); Gdzie mój CloseButton jest przycisk zamknięcia bootstrap