Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Raghavendra ARaghavendra A 

Customized Pop up modal and CSS

Hi All,

I would like to do the following. Show a few records in lightning component. When the user clicks on any record a pop up modal should open that shows couple of fields from the record detail page. Then show a image. 

But everything that’s shown in the modal must have custom c s s . Like background of the modal must be blue instead of white and then different font etc. 

can we design a lightning component like this? Any help is highly appreciated! 

Thanks,
Raghu 
NagendraNagendra (Salesforce Developers) 
Hi Raghavendra,

Please find the sample code below and tweak it as per the requirement which should help you start further with the above task.

Visual Force Page: 
<apex:page controller="tstpopup">
    <apex:form >
        <apex:pageBlock >
           <apex:pageBlockTable value="{!leads}" var="led">
           <apex:column headerValue="Name">
           <apex:commandLink value="{!led.Name}" action="{!showpopup}" >
           <apex:param name="window" value="{!led.id}"/>
           </apex:commandLink>
          </apex:column>
           </apex:pageBlockTable>
        
 
        <apex:outputPanel id="tstpopup">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
           
            <apex:outputField value="{!ll.name}"/>&nbsp;&nbsp;
             <apex:outputField value="{!ll.Email}"/>&nbsp;&nbsp;
               <apex:outputField value="{!ll.company}"/>
               <apex:outputField value="{!ll.Phone}"/>
               
                 <br/>
                <apex:commandButton value="cancel" action="{!closePopup}" rerender="tstpopup"/>
            </apex:outputPanel>
        </apex:outputPanel>
 </apex:pageBlock>
    </apex:form>
 
    <style type="text/css">
        .custPopup{
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            padding:10px;
            position: absolute;
            top:100px;
           
        }
        .popupBackground{
            background-color:black;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9998;
        }

    </style>
</apex:page>
Apex Controller: 
public with sharing class tstpopup {

    public lead ll { get; set; }

 public Boolean displayPopUp { get; set; }
  public List<Lead> leads { get; set; }
    public tstpopup(){
       leads=new List<Lead>();  
       ll=new lead();
       leads=[select Name,Email from Lead];
    }

    public PageReference closePopup() {
        displaypopup=false;
        return null;
    }
    
  public PageReference showPopup() {
    string ids=apexpages.currentpage().getparameters().get('window');
    ll =[select Name,Email,company,phone from lead  where id=:ids];
       displaypopup=true;
        return null;
    }

}
Also, you can use jQuery and dialog. Documentation here.
Within the parent div of the dialog, you can use an apex:datatable.

Hope this helps.

Kindly mark this as solved if the reply was helpful so that it gets removed from the unanswered queue which results in helping others who are encountering a similar issue.

Thanks,
Nagendra

 
Raghavendra ARaghavendra A
Hi,

I am looking for the solution in Lightning Component and not Visualforce Page. 

Thanks for responding!