Modal 띄우기

Angular에서 Modal띄우는 방법.

순수 javascript modal과 약간 다르다.

Install

npm install angular-custom-modal

Usage

app.module.ts

imports: [
  ...
  ModalModule,
  ...
],
...
})

http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box

나머지는 여기 보로 따라하면 된다. 아래는 내가 사용했던 소스

html

<modal id="url-modal">
    <div class="modal">
        <div class="modal-title">
          <img class="modal-icon" src="assets/icon_black.png"/>
        </div>
        <div class="modal-body">
            <div>{{modalText}}</div>
            <button class="modal-button" (click)="closeModal('url-modal');">확인</button>

        </div>
    </div>
    <div class="modal-background"></div>
</modal>

component

openUrlModal(){
  this.modalText="URL이 클립보드에 복사되었습니다."
  this.modalService.open('url-modal');
 }

 closeModal(id: string){
     this.modalService.close(id);
 }

service

import * as _ from 'underscore';

export class ModalService {
    private modals: any[] = [];

    add(modal: any) {
        // add modal to array of active modals
        this.modals.push(modal);
    }

    remove(id: string) {
        // remove modal from array of active modals
        let modalToRemove = _.findWhere(this.modals, { id: id });
        this.modals = _.without(this.modals, modalToRemove);
    }

    open(id: string) {
        // open modal specified by id
        let modal = _.findWhere(this.modals, { id: id });
        modal.open();
    }

    close(id: string) {
        // close modal specified by id
        let modal = _.find(this.modals, { id: id });
        modal.close();
    }
}

css

/* MODAL STYLES
-------------------------------*/
modal {
    /* modals are hidden by default */
    display: none;

    /* modal container fixed across whole screen */
    background: #ffffff;
    width: 280px;
    height: 90px;

    position: fixed;
    top: 40vh;
    right: 0;
    bottom: 0;
    left: 50%;
    margin-left: -140px;

    /* z-index must be higher than .modal-background */
    z-index: 1000;
}

modal .modal-title{
 font-size: 14px;
 font-weight: 500;
 padding: 15px 15px 0px 15px;
 background: #ffffff;
}

modal .modal-body{
 font-size: 13px;
 padding: 18px;
 width: 100%;
 height: 90px;
 background: #ffffff;
 box-sizing: border-box;
}

modal .modal-background{
  position: fixed;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.6;
}

modal .modal-icon{
  width: 40px;
}

modal .modal-button{
  border: none;
  outline: none;
  padding: 7px;
  font-size: 15px;
  margin-top: 15px;
  box-sizing: border-box;
  background: none;
  color: #02101b;
  display: inline-block;
  float:right;
}



body.modal-open {
    /* body overflow is hidden to hide main scrollbar when modal window is open */
    overflow: hidden;
}

directive

여기에서 jquery때문에

npm install jquery --save

npm install --save-dev @types/jquery

import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
// import * as $ from 'jquery/dist/jquery.min.js';
import * as $ from 'jquery';

import { ModalService } from '../service/index';

@Component({
    moduleId: module.id.toString(),
    selector: 'modal',
    template: '<ng-content></ng-content>'
})

export class ModalComponent implements OnInit, OnDestroy {
    @Input() id: string;
    private element: JQuery;

    constructor(
      private modalService: ModalService,
      private el: ElementRef) {
        this.element = $(el.nativeElement);
    }

    ngOnInit(): void {
        let modal = this;

        // ensure id attribute exists
        if (!this.id) {
            console.error('modal must have an id');
            return;
        }

        // move element to bottom of page (just before </body>) so it can be displayed above everything else
        this.element.appendTo('body');

        // close modal on background click
        this.element.on('click', function (e: any) {
            var target = $(e.target);
            if (!target.closest('.modal-body').length) {
                modal.close();
            }
        });

        // add self (this modal instance) to the modal service so it's accessible from controllers
        this.modalService.add(this);
    }

    // remove self from modal service when directive is destroyed
    ngOnDestroy(): void {
        this.modalService.remove(this.id);
        this.element.remove();
    }

    // open modal
    open(): void {
        this.element.show();
        $('body').addClass('modal-open');
    }

    // close modal
    close(): void {
        this.element.hide();
        $('body').removeClass('modal-open');
    }
}

app.module.ts에도 등록해줘야 한다.

import {ModalComponent} from "./directive";