로딩팝업 background black 으로 설정하기

화면에 들어가면 바로 로딩되어 팝업모달이 뜨는 로직이 있는데 

, 뒤에 있는 정보가 보이면 안되어 모달 background 를 아래와 같이 black으로 설정하고자 하는게 목적이었다  

[HTML]

<template>
    <!--spinner-->
    <template if:true={loading}> 
        <div class="exampleHolder">
            <lightning-spinner alternative-text="Loading" size="xx-small"></lightning-spinner>
        </div>
    </template>
    <template if:false={loading}> 
        <template if:true={showModal} class ="overlay">
            <!-- contact detail page 진입시 뜨는 팝업 -->
            <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01"
                class="slds-modal slds-fade-in-open slds-modal_small">
                <div class="slds-modal__container">
                    <!-- PopUp Header -->
                    <header class="slds-modal__header">
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">
                            고객사임직원 
                        </h2>
                    </header>
                    <!-- PopUp Body -->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

                    <h2 class ="fontsizeChange">※ 본 화면에 기록된 고객사 임직원 상세 정보는 영업사원이 자체 수집한 것으로,</br>고객에게 수집 동의를 받지 않은 정보입니다.</br>해당 정보를 임의로 이용 또는 유출할 경우 관련 법규의 제재를 받을 수 있음을 각별히 유의하시기 바랍니다.</h2>

                    </div>
                    <!-- PopUp Footer -->
                    <footer class="slds-modal__footer">
                        <lightning-button variant="brand" label="확인" title="Submit" onclick={confirm}
                            class="slds-m-center_x-small"></lightning-button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </template>
    </template>
</template>

 

 

[CSS]

.overlay{

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: rgb(0, 0, 0);

  background-color: rgba(0, 0, 0, 0);

  overflow-x: hidden;

  transition: 0.5s;

}

.fontsizeChange{

  font-size: 16px;

}

.slds-modal.slds-fade-in-open.slds-modal_small{

  background-color: rgb(0, 0, 0);

}

[JS]

 

import { LightningElement, track, api } from 'lwc';

import { NavigationMixin } from 'lightning/navigation';

import getContacts from '@salesforce/apex/ContactModalController.getContacts';

export default class Ds_ContactModal1 extends NavigationMixin(LightningElement) {

    @track loading = true;

    @track showModal = true;

    @api recordId;

    @track PrivacyAgree;

    connectedCallback() {

        console.log('connectedCallback ::');

        console.log('recordId ::-----'+ this.recordId);

        getContacts({

            'recordId': this.recordId

        }).then(result => {

            console.log('true or false --> ' + result );

            this.loading = false;

            this.showModal = !result;

        }).catch(error => {

            console.log('Error ::: ', error);

        })

    }

    confirm() {

        this.showModal = false;

    }

}

 

 

 

 

[tip!]

 

class="slds-modal slds-fade-in-open slds-modal_small" 과 같이 기본 slds 쓰는 태그들은 

. 으로 구분해서 css를 설정한다.