I am using Salesforce default lightbox on VF page. Actually My intension is to display a popup of editing record in a page block which is embedded in output panel as shown below screenshots

Please anyone reply me where i am wrong.

    <apex:page controller="lightboxcls">
<apex:stylesheet value="{!URLFOR($Resource.XXofficeCSS, 'css/base.css')}"/>

<apex:stylesheet value="{!URLFOR($Resource.XXofficeCSS, 'popup/reveal.css')}"/>

<apex:includeScript value="{!URLFOR($Resource.XXofficeCSS, 'popup/jquery.min.js')}" />

<apex:includeScript value="{!URLFOR($Resource.XXofficeCSS, 'popup/jquery.reveal.js')}"/>
<script type="text/javascript">
    function fun(){


<!--<apex:inputText value="{!name}"/>-->
<apex:form >
<apex:pageBlock mode="edit" >

<!-- <apex:pageBlockSection title="All Contacts" collapsible="false" columns="1"> -->
<apex:pageblockTable value="{!Acn}" var="a"  >
<a data-animation="fade" dragable="true" data-reveal-id="myModal1" style="display:block;text-decoration:underline;margin-left:6px;margin-top:5px;">
<apex:column headerValue="Action" >

 <apex:commandlink action="{!Edit}" id="processlblsSearch" immediate="true" >Edit
 <apex:param value="{!a.id}" name="Sel" assignTo="{!AId}" />  

<apex:column value="{!a.Name}" headerValue="Name" >
<apex:column headerValue="Phone" value="{!a.phone}">


<div id="myModal1" class="reveal-modal">
<a class="close-reveal-modal" style="text-decoration:none;">&#215;</a>
    <apex:outputpanel layout="block" rendered="{!displayPopUp}" > 
       <apex:pageBlock id="pb" mode="Edit">

  <apex:pageBlockSection >
        <apex:inputField value="{!acnt.name}"/>
        <apex:inputField value="{!acnt.Phone}"/>
        <apex:commandButton value="Save" action="{!save}" reRender="pb" oncomplete="return fun()"/>

<a class="close-reveal-modal" style="text-decoration:none;">&#215;</a>

---------------------Controller / class below ---------------------------

public class lightboxcls {
public boolean displayPopUp{get;set;} 
public Account Acnt{get;set;}
public string Aid{get;set;}
public list<account> Acn{get;set;}
   //public string name{get;set;}
   //public Account acc{get;set;}

   public lightboxcls()
       //acc=new Account();
    Acn = new list<Account>();
    Acn = [select id,name,phone from Account];


    public void save(){
        update Acnt;
        // acc=new Account();


    public void Edit()
    Acnt = new Account();
    Acnt = [select id,Name,Email__c,Phone,Industry,AccountSource,Amount__c from Account where id=:Aid];

    system.debug('------------------> ' +Acnt);
     system.debug('------This is Id------------> ' +Aid);



Get My static resource(Jquery / light) here If u need,

Initiall page looks like Expected LightBox / PopUp should be displayed

Get My static resource(Jquery / light) here If u need,

  • I cant see any re-rendering of the modal box section. How will the section be updated then?
    – AslamK
    May 1, 2015 at 7:23
  • I used the rerender also,if u dont mined, could you tell me any other alternative please,
    – SFDC_Igle
    May 1, 2015 at 7:36
  • Added an answer. It might not satisfy your exact requirement, but it could get you started on the right track.
    – AslamK
    May 1, 2015 at 7:42
  • I also used your code just earlier Thats nice and, I am looking for a PopUp with Transition effects etc, if i didnt get any other solutions i will use this finally, Thanks @AslamK, Hope i will get solution by others also,
    – SFDC_Igle
    May 1, 2015 at 8:01

2 Answers 2


This doesnt use Lightbox or even jQuery, but it gets a simple popup. You would need to apply some CSS modifications to get it as per your liking.


      <apex:page controller="tstpopup">
            <apex:form id="myForm">
                <apex:pageBlock id="enteredValues">
                    <b>Values Entered : </b><br /><br />
                    Name : {!someText} <br />
                    Emp Id : {!someNumber} <br />
        <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="tstpopup"/>

        <apex:outputPanel id="tstpopup">
        <apex:outputPanel id="backPanel" styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
            <table id="innertable">
                    <td colspan="2"><b>Enter Information  : </b><br /><br /></td>
                    <td><apex:outputLabel value="Name   :  " /></td><td><apex:inputText id="textId" value="{!someText}" /></td>
                    <td colspan="2"><apex:outputLabel id="textErrorMsg" style="color:red;display:none;font-weight:bold;font-size:95%;">Name cant be blank!</apex:outputLabel></td>
                    <td><apex:outputLabel value="Emp No :  " /></td><td><apex:inputText id="numId" value="{!someNumber}" /></td>
                    <td colspan="2"><apex:outputLabel id="numErrorMsg" style="color:red;display:none;font-weight:bold;font-size:95%;">Enter a valid number!</apex:outputLabel></td>
                    <td colspan="2">
                        <apex:commandButton value="Submit" action="{!closePopup}" rerender="tstpopup,enteredValues" onclick="if(!check()){return};" />
                        <apex:commandButton value="Cancel" action="{!closePopup}" rerender="tstpopup,enteredValues" />

        function check(){
            text = document.getElementById('{!$Component.myForm.textId}').value;
            num = document.getElementById('{!$Component.myForm.numId}').value;
            checkStatus = true;
            if(text==null || text==""){
            else document.getElementById('{!$Component.myForm.textErrorMsg}').style.display='none';               
            if(num==null || num=="" || isNaN(num)){
            else document.getElementById('{!$Component.myForm.numErrorMsg}').style.display='none';               

            return checkStatus;

    <style type="text/css">
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 2;
            left: 50%;
            width: 250px;
            margin-left: -120px;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;



public class tstpopup { 
    public String someNumber { get; set; }

    public String someText { get; set; }

    public boolean displayPopup {get; set;}     

    public void closePopup() {        
        displayPopup = false;    
    public void showPopup() {        
        displayPopup = true;    


I guess it is the problem with the way jQuery is being used here.

The best practice for using jQuery in Visualforce is to make use of the jQuery.noConflict() function to reassign jQuery’s global variable to something which won’t conflict with any other libraries which may already be in use (including standard, native libraries used within Visualforce).

Something like this:

var j$ = jQuery.noConflict();

Then replace '$' with 'j$' where ever you are using jQuery.

Hope this helps. You can get more information on using jQuery in Force.com Here.

I hope this helps.

  • 2
    I disagree that this is best practice. It is better than not using it, but even better are Self-Executing Anonymous Functions. You actually don't even need to call noConflict when using this pattern.
    – Adrian Larson
    Mar 20, 2016 at 19:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .