Lightning-modal spinner overlay screen

Question

I'm using the new feature: lightning-modal and using a lightning-spinner:

<template>
<lightning-modal-header label="Test"></lightning-modal-header>
<lightning-modal-body size="full">
    <lightning-spinner if:true={isLoading} alternative-text="Loading" size="large" variant="brand"></lightning-spinner>

My spinner is overlaying like this and my desire is remove the white patch, with the spinner oppacity ocupes only in the modal. I tried every option like position relative and wasn't able to resolve this issue.

Answer 1

I have added slds-is-relative as mentioned in lightning:spinner Overlay screen this post and it is working.

Model code:

myModal.html

<template>
    <lightning-modal-header label="Test"></lightning-modal-header>
    <lightning-modal-body> Content: {content}
        <div class="slds-is-relative">
            <lightning-spinner if:true={isLoading} alternative-text="Loading" variant="brand"></lightning-spinner>
        </div>
    </lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button label="OK" onclick={handleOkay}></lightning-button>
    </lightning-modal-footer>
</template>

myModal.js

import { track, api } from 'lwc';
import LightningModal from 'lightning/modal';

export default class MyModal extends LightningModal {
    @api content;
    @track isLoading = true;

    handleOkay() {
        this.close('okay');
    }
}

modelOverLayTest.html

<template>
<lightning-button
        onclick={handleClick}
        aria-haspopup="dialog"
        label="Open My Modal">
    </lightning-button>
    <p>Result: {result}</p>
</template>

modelOverLayTest.js

import { LightningElement } from 'lwc';
import MyModal from 'c/myModal';

export default class modelOverLayTest extends LightningElement {
   async handleClick() {
        const result = await MyModal.open({
            // `label` is not included here in this example.
            // it is set on lightning-modal-header instead
            size: 'full',
            description: 'Accessible description of modal\'s purpose',
            content: 'Passed into content api',
        });
        // if modal closed with X button, promise returns result = 'undefined'
        // if modal closed with OK button, promise returns result = 'okay'
        console.log(result);
    }
}

Ouptup: