Jquery lightbox(Salesforce Default) Render issue on VF page,

Question

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(){
       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 / 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()
   {
   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);

    }


}

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

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

Answer 1

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.

Page:

      <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:pageBlock>
        <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">
                <tr>
                    <td colspan="2"><b>Enter Information  : </b><br /><br /></td>
                </tr>
                <tr>
                    <td><apex:outputLabel value="Name   :  " /></td><td><apex:inputText id="textId" value="{!someText}" /></td>
                </tr>
                <tr>
                    <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>
                </tr>
                <tr> 
                    <td><apex:outputLabel value="Emp No :  " /></td><td><apex:inputText id="numId" value="{!someNumber}" /></td>
                </tr>
                <tr>                    
                    <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>
                </tr>
                <tr>                    
                    <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" />
                    </td>
                </tr>                    
                </table>
            </apex:outputPanel>
        </apex:outputPanel>

    </apex:form>
    <script>
        function check(){
            text = document.getElementById('{!$Component.myForm.textId}').value;
            num = document.getElementById('{!$Component.myForm.numId}').value;
            checkStatus = true;
            if(text==null || text==""){
                document.getElementById('{!$Component.myForm.textErrorMsg}').style.display='block';               
                checkStatus=false;
            }
            else document.getElementById('{!$Component.myForm.textErrorMsg}').style.display='none';               
            if(num==null || num=="" || isNaN(num)){
                document.getElementById('{!$Component.myForm.numErrorMsg}').style.display='block';               
                checkStatus=false;
            }
            else document.getElementById('{!$Component.myForm.numErrorMsg}').style.display='none';               

            return checkStatus;
        }
    </script>

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

    </style>
</apex:page>

Controller:

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;    
    }

  }

Answer 2

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.