Modal을 Event로 Close하기

1. Modal에서 Close할 시 관련 Custom Event를 생성할 Function을 생성한다.

+ Custom Event의 Name은 모두 소문자로 작성해야 한다.

 

handleClose () {
        console.log(('Close Modal'));
        const selectedEvent = new CustomEvent('closemodal', { detail: { value : 'close' } } );
        this.dispatchEvent(selectedEvent);
} // handleClose

 

2. Function을 Modal의 Close버튼의 onclick속성과 연결한다.

 

<template>

    <template if:true={_show}>
        <section
                role="dialog"
                tabindex="-1"
                aria-labelledby="modal-heading-01"
                aria-modal="true"
                aria-describedby="modal-content-id-1"
                class="slds-modal slds-fade-in-open slds-hyphenate slds-modal_medium"
        >
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <button
                            class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                            onclick={handleClose}
                    >
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                </header>

                <div class="slds-modal__content slds-hyphenate shadow-overlay">
                    <div class="slds-p-around_medium">
                        <slot>
                            <div class="section-container"> </div>
                        </slot>
                    </div>
                </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
    
</template>

 

+ 이 부분을 보면 된다.

<button
        class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
        onclick={handleClose}
>
    <span class="line"></span>
    <span class="line"></span>
    <span class="slds-assistive-text">Close</span>
</button>

 

2. 해당 Modal의 부모 Component에서 방금 생성한 Custom Event를 받는다.

 

<template if:true={isModalOpen}>
    <c-open-modal
            _show-dialog={isModalOpen}
            onclosemodal={handleCloseModal}
    ></c-open-modal>
</template>

 

3. 부모 Component에서 Modal이 있는 Child Component에서 Custom Event를 발생시 실행할 Function을 생성한다.

 

handleCloseModal(event) {
        if (event.detail.value === 'close') {
            console.log('Modal Close');
            this.isModalOpen = false;
        } // close
} // handleModifyIpTaxonomyModal