public class related11{public boolean showdetrecs{set;get;}public boolean showeditrecs{set;get;}message__c m1;public string mee{set;get;}String eid;set<id> mset=new set<id>();list<message__c> mlist=new list<message__c>();list<message__c> rlist=new list<message__c>();public boolean ree{set;get;}public boolean re{set;get;}public boolean re1{set;get;}public  related11(){showdetrecs=true;re=false;re1=true;for(message__c m:[select name,id from message__c]){mlist.add(m);}}public void view(){eid=apexpages.currentPage().getParameters().get('pid');m1=[select messg__c,id,name from message__c where id=:eid];m1.messg__c='';showeditrecs=true;}public list<message__c> getdata(){return rlist;}public list<message__c> getrdetails(){return mlist;}public message__c getcomment(){return m1;}public void save(){showeditrecs=false;re=false;update m1;m1.messg__c='';}public void cancel(){m1.messg__c='';showeditrecs=false;}}

<apex:page controller="related11" showHeader="false">

<!--<script language="javascript" type="text/javascript">

       function toggleDiv()

       { 

           document.getElementById("Button1").style.visibility="hidden"; 

         } 

function toggleDiv1()

       { 

if(document.getElementById("Button1").style.visibility=="hidden")

{

           document.getElementById("Button1").style.visibility="visible"; 

           }

else

document.getElementById("Button1").style.visibility="hidden";

         } 

     </script>-->

<apex:form >

<apex:outputPanel rendered="{!showdetrecs}" id="aaa">

<apex:pageBlock onclick="toggleDiv()">

<apex:pageBlockTable value="{!rdetails}" var="t">

<apex:column headerValue="Name" >{!t.name}

<apex:actionSupport event="ondblclick"  action="{!view}" rerender="acctDetails"> 

                              <apex:param name="pid" value="{!t.Id}"/>

                          </apex:actionSupport>  

</apex:column>

</apex:pageBlockTable>

</apex:pageBlock>

</apex:outputPanel>

<div id="Button1">

<apex:outputPanel styleClass="customPopup" id="acctDetails" rendered="{!showeditrecs}">

 <!--<apex:pageBlock title="{!comment.name}" >-->

<!--<apex:pageblockSection title="Comment">-->

<apex:outputtext value="{!comment.messg__c}"/>

<!--</apex:pageBlockSection>-->

<center>

<!--<apex:commandButton value="Save" action="{!save}"/>-->

<apex:commandButton value="Cancel" action="{!cancel}" />

</center><!--</apex:pageBlock>-->

</apex:outputPanel>

</div>

<style type="text/css">

       .customPopup{

            background-color: white;

            border-style: solid;

            border-width: 4px;

            left: 40%;

            padding:10px;

            position: absolute;

            z-index: 9999;

            /* These are the 3 css properties you will need to tweak so the pop 

            up displays in the center of the screen. First set the width. Then set 

            margin-left to negative half of what the width is. You can also add 

            the height property for a fixed size pop up.*/

            width: 200px;

            margin-left: -250px;

            top:100px;

        }

    </style>

    </apex:form>

</apex:page>