haii all,

can someone help me i need a pop up whenever i tried to del record in lwc
thanks in advanve
mahiahmed587@gmail.com

js file

import { LightningElement,track,wire } from 'lwc';
import {refreshApex} from '@salesforce/apex';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';  
import { deleteRecord } from 'lightning/uiRecordApi'; 
import getAccounts from'@salesforce/apex/listOfAccount.getAccounts';
import { NavigationMixin } from 'lightning/navigation'; 
const actions = [
    { label: 'Delete', name: 'Delete' },
    { label: 'Edit', name: 'Edit' },
];
const columns = [   
    { label: 'Name', fieldName: 'Name',sortable:true,type:'text'},  
    { label: 'Industry', fieldName: 'Industry', sortable:true,type:'text' },
    {
        type:'action',
          typeAttributes:{ rowActions: actions },
    } 
]; 
export default class DisplayRecordWithDataTable extends NavigationMixin(LightningElement) {
     @track sortBy;
   @track sortDirection;
    @track data;
    @track columns = columns;
  doSorting(event) {
        this.sortBy = event.detail.fieldName;
        this.sortDirection = event.detail.sortDirection;
        this.sortData(this.sortBy, this.sortDirection);
    }
    sortData(fieldname, direction) {
        let parseData = JSON.parse(JSON.stringify(this.data));
        // Return the value stored in the field
        let keyValue = (a) => {
            return a[fieldname];
        };
        // cheking reverse direction
        let isReverse = direction === 'asc' ? 1: -1;
        // sorting data
        parseData.sort((x, y) => {
            x = keyValue(x) ? keyValue(x) : ''; // handling null values
            y = keyValue(y) ? keyValue(y) : '';
            // sorting values based on direction
            return isReverse * ((x > y) - (y > x));
        });
        this.data = parseData;
    }      
        
       @wire(getAccounts)
    accounts(result) {
        if (result.data) {
            let nameUrl;
            this.data = result.data;
            this.error = undefined;
        } else if (result.error) {
            this.error = result.error;
            this.data = undefined;
        }
    }
    callRowAction(event) {  
        const recId =  event.detail.row.Id;  
        const actionName = event.detail.action.name;  
        if ( actionName === 'Edit' ) {  
            this[NavigationMixin.Navigate]({  
                type: 'standard__recordPage',  
                attributes: {  
                    recordId: recId,  
                    objectApiName: 'Account',  
                    actionName: 'edit'  
                } 
            })  
  
        } else if ( actionName === 'Delete') {  
              deleteRecord(event.detail.row.Id)
            .then(()=>{
                this.dispatchEvent(new ShowToastEvent({
                    title: 'Success',
                    message: 'Record deleted successfully',
                    variant: 'success'
                }))
                window.location.reload();
               return refreshApex(this.getAccounts);
            })
  
    }
    }
}


html file
<template>
    <lightning-card title="Display Account Record List">
      <div class="slds-m-around_medium">  
         <template if:true = {accounts}>  
                  
               
        
<lightning-datatable data={data} columns={columns} key-field="id" hide-checkbox-column="false"  
                     show-row-number-column="true" 
                     onsort={doSorting} 
                      sorted-by={sortBy}
                      sorted-direction={sortDirection}
                        row-number-offset ="0"  
                        onrowaction={callRowAction}>
></lightning-datatable>
         </template>
          <template if:true = {error}>  
  
                {error}>  
                  
            </template>  
      </div>
    </lightning-card>
</template>