web-dev-qa-db-de.com

winkel 5 - modale Direktive

Dies ist mein erstes Mal bei Angular mit TypeScript. Ich habe mich wirklich bemüht, diese modale Direktive zu erstellen, die von ngMorph inspiriert wurde.

Dies funktioniert wie erwartet, aber ich bin auf ein sehr seltsames Problem gestoßen. Wenn ich auf die Schaltfläche klicke, um die modale Box zu öffnen, funktioniert sie genauso gut und ich schließe die modale Box, sie wird geschlossen. Wenn ich versuche, dieselbe modale Box erneut zu öffnen und zu schließen, wird sie nicht geschlossen. Und es gibt auch keine Fehler. 

Nach dem Debuggen habe ich festgestellt, dass die modal-active-Klasse in modal-button nicht entfernt wird.

HTML

<div class="modal-button edit-sample-modal" [appModal] data-modal="edit-sample-modal">Open Modal</div>

<div class="custom-modal" id="edit-sample-modal">
    <a href="javascript:void(0)" class="text-default">
        <i class="fa fa-close fa-fw close-modal"></i>
    </a>
</div>

Hier ist mein Code für den Modal

import { Directive, ElementRef, AfterViewChecked, Input, HostListener } from '@angular/core';

@Directive({
    selector: '[appModal]'
})
export class ModalDirective implements AfterViewChecked {

    @Input()
    appModal: string;

    constructor(
        private element: ElementRef
    ) { }

    ngAfterViewChecked() {
        // function to go here
        this.initModalBox(this.element.nativeElement, this.element.nativeElement.getAttribute('data-modal'));
    }

    @HostListener('click') onclick() {
        this.initModalBox(this.element.nativeElement, this.element.nativeElement.getAttribute('data-modal'));

        const modalElement = document.getElementById(this.element.nativeElement.getAttribute('data-modal'));

        this.element.nativeElement.classList.toggle('modal-active');
        modalElement.classList.toggle('modal-open');
    }

    initModalBox(button: HTMLElement, modalDialog: string) {
        const trigger: HTMLElement = button;
        const triggerPos = trigger.getBoundingClientRect();

        const modalElement = document.getElementById(modalDialog);

        modalElement.style.top = `${triggerPos.top}px`;
        modalElement.style.left = `${triggerPos.left}px`;
        modalElement.style.height = `${triggerPos.height}px`;
        modalElement.style.width = `${triggerPos.width}px`;

        modalElement.style.position = 'fixed';

        const closeElement = modalElement.getElementsByClassName('close-modal')[0];

        closeElement.addEventListener('click', function () {
            modalElement.classList.toggle('modal-open');
            // this.element.nativeElement.classList.toggle('modal-active');
            document.getElementsByClassName(modalElement.getAttribute('id'))[0].classList.toggle('modal-active');
        });
    }
}

Ich weiß, dass der Code nicht perfekt ist, ich lerne nur Dinge, und ich bin bis jetzt dazu gekommen. Ich habe mich sogar gefragt, ob ich jQuery verwenden möchte, aber ich möchte nicht das Angular -Projekt verwenden. Jede Hilfe wird geschätzt.

2
Unknown User

Für modal in Angular mit TypeScript kann man mit bootstrap ..__ gehen. Ein modales Beispiel finden Sie in diesem Link .. Klicken Sie auf hier !

1: Importieren Sie ModalModule in Ihr Modul wie folgt:

import { ModalModule } from 'ngx-bootstrap';
@NgModule({
imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}

2: Fügen Sie Ihrer HTML-Datei die folgende Zeile hinzu

<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>

<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Static modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        This is static modal, backdrop click will not close it.
        Click <b>&times;</b> to close modal.
      </div>
    </div>
  </div>
</div>

Das ist es!

5
Saurav

Dies gilt für Bootstrap 4.1.X und Winkel 6.0.X

modal.html

<!-- MODAL TRIGGER -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" appModal>Launch Modal</button>

<!-- MODAL -->

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button class="close" data-dismiss="modal" appModal>&times;</button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde veniam harum magnam molestias dignissimos omnis
        architecto, quod, obcaecati dolorum debitis dolore porro qui, iusto quo accusantium voluptates pariatur illo.
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal" appModal>Close</button>
      </div>
    </div>
  </div>
</div>

appModal.directive.ts

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appModal]'
})
export class AppModalDirective {

constructor() { }

  @HostListener('click') modalOpen(){
    document.getElementById('myModal').classList.toggle('d-block');
  }
}
0
Prakash Khadka