Hi There,

I am using Salesforce default lightbox on VF page using a Static Resource. Actually My intension is to display a popup of editing record in a page block which is embedded inside  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(){
       alert(document.getElementById('j_id0:j_id6:pb:j_id10:j_id11').value);
      if(document.getElementById('j_id0:j_id6:pb:j_id10:j_id11').value!=''){
             
       $('#myModal1').trigger('reveal:close');
       }

    }
</script>
<!--<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:commandlink>
</apex:column></a>

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


</apex:pageblockTable>
</apex:pageBlock>

<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()"/>
        </apex:pageBlockSection>
        

       </apex:pageBlock>
    </apex:outputpanel>
<a class="close-reveal-modal" style="text-decoration:none;">&#215;</a>
</div>
</apex:form>
</apex:page>


--------------------- Controller 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()
   {
   displayPopUp=false;
       //acc=new Account();
    Acn = new list<Account>();
    Acn = [select id,name,phone from Account];

   }

    public void save(){
   displayPopUp=false;
        update Acnt;
        // acc=new Account();
    
    }
    
    
    public void Edit()
    {
    displayPopUp=true;
    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);
    
    }
     
    
}

If you want My static resource used in this Page get it here,
https://drive.google.com/file/d/0B1wNUoOAwRhfTkUzdUdQQjlTUFE/view?usp=sharing