<aura:component controller="AccountsController" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">

        <aura:attribute name="accounts" type="List" />
        <aura:attribute name="accountDetails" type="List" />
        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
        <!-- Use a data table from the Lightning Design System: https://www.lightningdesignsystem.com/components/data-tables/ -->
        <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
            <thead>
            <tr class="slds-text-heading_label">
                <th scope="col"><div class="slds-truncate" title="ID">ID</div></th>
                <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
                <th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
                <th scope="col"><div class="slds-truncate" title="Number Of Employees">Number Of Employees</div></th>
                <th scope="col"><div class="slds-truncate" title="Ticker Symbol">Ticker Symbol</div></th>
                <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                <th scope="col"><div class="slds-truncate" title="Delete">Delete</div></th>
            </tr>
            </thead>
            <tbody>
            <!-- Use the Apex model and controller to fetch server side data -->
            <aura:iteration items="{!v.accounts}" var="account">
                <tr>
                    <th scope="row"><div class="slds-truncate" title="{!account.Id}" onmouseover="{!c.openModal}">{!account.Id}</div></th>
                    <td><div class="slds-truncate" title="{!account.Name}" >{!account.Name}</div></td>
                    <td><div class="slds-truncate" title="{!account.Type}">{!account.Type}</div></td>
                    <td><div class="slds-truncate" title="{!account.NumberOfEmployees}">{!account.NumberOfEmployees}</div></td>
                    <td><div class="slds-truncate" title="{!account.TickerSymbol}">{!account.TickerSymbol}</div></td>
                    <td><div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div></td>
                    <td>
                        <form class="account-form" onsubmit="{!c.deleteAccount}">
                            <input type="hidden" value="{!account.Name}" class="account-name" />
                            <!-- Use a Lightning Base Component To display an icon next to the label -->
                            <lightning:button
                                    label="Delete"
                                    iconName="utility:delete"
                                    iconPosition="left"
                                    variant="destructive"
                                    type="submit"
                            />
                        </form>
                    </td>
                </tr>

                <!-- The Modal -->
                <div id="myModal" class="modal">
                    <!-- Modal content -->
                    <div class="modal-content">
                        <span class="close" onmouseout="{!c.closeModal}">&times;</span>
                        <aura:iteration items="{!v.accountDetails}" var="accounts">
                            <p>{!accounts.Name}</p>
                            <p>{!accounts.Type}</p>
                            <p>{!accounts.NumberOfEmployees}</p>
                            <p>{!accounts.TickerSymbol}</p>
                            <p>{!accounts.Phone}</p>
                        </aura:iteration>
                    </div>
                </div>
            </aura:iteration>
            </tbody>
        </table>


    </aura:component>


JS Controller : -

    ({
        doInit: function(component, event, helper) {
            // Fetch the account list from the Apex controller
            helper.getAccountLists(component);
        },
        deleteAccount: function(component, event, helper) {
            // Prevent the form from getting submitted
            event.preventDefault();
            // Get the value from the field that's in the form
            var accountName = event.target.getElementsByClassName('account-name')[0].value;
            confirm('Delete the ' + accountName + ' account? (don’t worry, this won’t actually work!)');
        },

        // When the user clicks the button, open the modal
        openModal: function(component, event, helper) {
            event.preventDefault();
            console.log('val--->>'+event.currentTarget.title);
            let accId = event.currentTarget.title;
            var action = component.get('c.getAccountsDetails');
            // Set up the callback
            action.setParams({
               "accId": accId,
           });
            action.setCallback(this, function(actionResult) {
                component.set('v.accountDetails', actionResult.getReturnValue());
            });
            $A.enqueueAction(action);
            var modal = document.getElementById("myModal"); // Get the modal
            var btn = document.getElementById("myBtn"); // Get the button that opens the modal
            var span = document.getElementsByClassName("close")[0]; // Get the <span> element that closes the modal
            modal.style.display = "block";
        },
        // When the user clicks on <span> (x), close the modal
        closeModal: function() {
            var modal = document.getElementById("myModal"); // Get the modal
            var btn = document.getElementById("myBtn"); // Get the button that opens the modal
            var span = document.getElementsByClassName("close")[0]; // Get the <span> element that closes the modal
            modal.style.display = "none";
        },
        // When the user clicks anywhere outside of the modal, close it
        clickOutside: function(event) {
            var modal = document.getElementById("myModal"); // Get the modal
            var btn = document.getElementById("myBtn"); // Get the button that opens the modal
            var span = document.getElementsByClassName("close")[0]; // Get the <span> element that closes the modal
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    })


JS Helper : - 

    ({
        // Fetch the accounts from the Apex controller
        getAccountLists: function(component) {
            var action = component.get('c.getAccounts');
            // Set up the callback
            var self = this;
            action.setCallback(this, function(actionResult) {
                component.set('v.accounts', actionResult.getReturnValue());
            });
            $A.enqueueAction(action);
        }
    })
    
    
Class [AccountsController] : -

    public class AccountsController {

        @AuraEnabled
         public static List<Account> getAccounts(){
            List<Account> accList = [SELECT Id,Name,Type,NumberOfEmployees,TickerSymbol,Phone FROM Account];
        return accList;
        }

        @AuraEnabled
        public static List<Account> getAccountsDetails(String accId){
            List<Account> accList = [SELECT Id,Name,Type,NumberOfEmployees,TickerSymbol,Phone FROM Account WHERE Id=:accId];
            return accList;
        }
    }