2016-12-08 21 views
12

Nie chcę używać angular2-bootstrap lub ng2-bs3-modal jak sugeruje pytania/odpowiedzi Angular 2 Bootstrap Modal i Angular 2.0 and Modal Dialogkątowa 2 - Open/Close domyślny bootstrap modalne

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

czy próbowałeś tego: aria-hidden = "{{twojazmienna}}" – Milad

+0

@ xe4me nie, rzuca tym samym "Nie można powiązać z" ukrytą arią ", ponieważ nie jest to znana własność "div". Znalazłem odpowiedź – Ivaro18

Odpowiedz

9

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

+0

oprócz niektórych złych klas css bootstrap działa to jak czar. –

+0

Dzięki, @TheMuffinMan :) Cieszę się, że to działa dla Ciebie. –

1

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.

0

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.

enter image description here

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

0

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

+0

To pozwala tylko na zamknięcie modalu przez twój skrypt. Możesz użyć tego również do otwarcia modala, ale wtedy musisz utworzyć ukryty przycisk jako przycisk otwarcia bootstrap – Ivaro18

Powiązane problemy