function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Pavushetti Abhilash 3Pavushetti Abhilash 3 

Open Modal background should not visible

Hi folks,
I have created a lightning record edit form in LWC. The form should open on pop up. After modal opens the background is visible. It should not visible. Any suggestions. Please refer my html and js code. If any CSS should to be create, please let me know.
User-added image------html----------
<template>
    <div class="slds-m-bottom_large">
        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-size_4-of-5" style='font-weight: 500;font-size: 18px'>
                <span>RMA Case Line Item History</span>
            </div>
            <div class="slds-clearfix">
                <lightning-button label="New" variant="Neutral" onclick={newRmaForm} class="slds-float_right"></lightning-button>
            </div>
        </div>
    </div>
    <div class="landingpagebody">      
        <lightning-card title="">          
        <div class="slds-m-top_large">           
            <lightning-datatable key-field="id" data={rmarecord} columns={columns}></lightning-datatable>            
        </div>
    </lightning-card>
   
    <div if:true={showModal}>
        <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small"
            aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <lightning-icon style="cursor: pointer;" class="slds-float_right" icon-name="utility:close" size="small" onclick={handleClose} ></lightning-icon>
                    <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Create Case Line Item</h2>
                </header>
                <div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
    <lightning-record-edit-form object-api-name="R4C_Case_Line_Item__c" columns = "2" layout-type = "compact">
        <lightning-messages></lightning-messages>
    <lightning-input-field field-name="Name"></lightning-input-field>
    <lightning-input-field field-name="Case__c"></lightning-input-field>
        <lightning-input-field field-name="EPM_Name__c"></lightning-input-field>
            <lightning-input-field field-name="MMID_BU_Hierarchy__c"></lightning-input-field>
                <lightning-input-field field-name="Remedy__c"></lightning-input-field>
                    <lightning-input-field field-name="Return_Reason__c"></lightning-input-field>
                    <lightning-input-field field-name="Return_Type__c"></lightning-input-field>
                    <lightning-input-field field-name="Stocking__c"></lightning-input-field>
            
            
        <lightning-button type="submit"
                          name="submit"
                          label="Create Case Line Item">
            </lightning-button>
    </lightning-record-edit-form>
    </div>
                <footer class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" onclick={handleCancel}>Cancel</button>
                    <button class="slds-button slds-button_brand" onclick={handleSave}>Save</button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </div>
    </div>
</template>
-------------------------js-------------------------
import { LightningElement, wire, track, api} from 'lwc';
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
import { loadStyle } from 'lightning/platformResourceLoader';
// import CUSTOMCSS from '@salesforce/resourceUrl/recordForm'; //this is my static resource file name
import CONTACT_ID from "@salesforce/schema/User.ContactId";
import USER_ID from "@salesforce/user/Id";
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
/* import NAME from '@salesforce/schema/R4C_Case_Line_Item__c.Name';
import Case from '@salesforce/schema/R4C_Case_Line_Item__c.Case__c';
import EPM_Name from '@salesforce/schema/R4C_Case_Line_Item__c.EPM_Name__c';
import MMID_BU_Hierarchy from '@salesforce/schema/R4C_Case_Line_Item__c.MMID_BU_Hierarchy__c';
import Remedy from '@salesforce/schema/R4C_Case_Line_Item__c.Remedy__c';
import Return_Reason from '@salesforce/schema/R4C_Case_Line_Item__c.Return_Reason__c';
import Return_Type from '@salesforce/schema/R4C_Case_Line_Item__c.Return_Type__c';
import Stocking from '@salesforce/schema/R4C_Case_Line_Item__c.Stocking__c'; */

export default class RmaCaseLineItem extends LightningElement {
    isCssLoaded = false;
    @api recordId;
    objectApiName = 'R4C_Case_Line_Item__c';
    showModal = false;
    @track rmarecord = false;
    @track conid;
  
 /* renderedCallback(){
        if(this.isCssLoaded) return
        this.isCssLoaded = true;
        loadStyle(this,CUSTOMCSS).then(()=>{
            console.log('loaded');
        })
        .catch(error=>{
            console.log('error to load');
        });
    } */
  
    newRmaForm(event){
    this.showModal = true;
   // fields = [NAME, Case, EPM_Name, MMID_BU_Hierarchy, Remedy, Return_Reason, Return_Type, Stocking];
}
 handleClick(){
        this.showModal = true;
    }
    handleClose(){
        this.showModal = false;
    }
handleSave(){
        this.template.querySelector('lightning-record-edit-form').submit();
        this.showModal = false;
        const evt = new ShowToastEvent({
            title: "Success!",
            message: "Case Line Item Created",
            variant: "success",
        });
        this.dispatchEvent(evt);
    }
    handleCancel(){
        this.showModal = false;
    }
    handleSubmit(event){
        event.preventDefault();       // stop the form from submitting
        const fields = event.detail.fields;
        fields.LastName = 'My Custom Last Name'; // modify a field
        this.template.querySelector('lightning-record-form').submit(fields);
     }
    @track columns = [
        {label:'R4C configuration name', fieldName:'R4C configuration name', type:'string'},
        {label:'Case', fieldName:'Case__c', type:'text'},
        {label:'EPM Name', fieldName: 'EPM_Name__c', type:'text'},
        {label:'Remedy', fieldName: 'Remedy__c',type:'data'},
        {label:'Return Reason', fieldName: 'Return_Reason__c',type:'data'},
        {label:'Return Type', fieldName:'Return_Type__c',type:'data'},
        {label:'Stocking', fieldName:'Stocking__c', type:'data'},
        {label:'MMID', fieldName:'MMID_BU_Hierarchy__c', type:'text'}
    ]
  @wire (getRecord, {recordId : USER_ID, fields: [CONTACT_ID]})
user;
get contactId() {
        this.conid = getFieldValue(this.user.data, CONTACT_ID);
        return getFieldValue(this.user.data, CONTACT_ID);
    } 
}
Best Answer chosen by Pavushetti Abhilash 3
Hara SahooHara Sahoo
Hi, Its here.
<div class="slds-backdrop slds-backdrop_open"></div>
overwrite the background as per your design in your css file.

.slds-backdrop {
transition-duration: var(--lwc-durationSlowly,0.4s);
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: white;
/* background: var(--sds-c-backdrop-color-background, var(--lwc-colorBackgroundTempModalTint,rgba(8, 7, 7, 0.6))); */
z-index: var(--lwc-zIndexModal,9000);
}

All Answers

Hara SahooHara Sahoo
Hi, Its here.
<div class="slds-backdrop slds-backdrop_open"></div>
overwrite the background as per your design in your css file.

.slds-backdrop {
transition-duration: var(--lwc-durationSlowly,0.4s);
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: white;
/* background: var(--sds-c-backdrop-color-background, var(--lwc-colorBackgroundTempModalTint,rgba(8, 7, 7, 0.6))); */
z-index: var(--lwc-zIndexModal,9000);
}
This was selected as the best answer
Mukesh Kumar 470Mukesh Kumar 470
 create a LWC component to show EmailStatus.

There is an object named as email status show that in LWC

please help me