Hi experts,

I am new to Visualforce. I want to display Account records, then when we click on the name or button, a popup box (Modal Popup only) should be opened displaying the name and phone number using JavaScript. I am able to do it through CSS style but didn't understand how to achieve this using JavaScript.

Below is my code.

<apex:page standardController="Account" recordSetVar="accnt" tabStyle="Account" >  
    <script type="text/javascript">
        var popupbox = new SimpleDialog("Test", true);
        popupbox = createDialog();
    	function OpenPopup(){
            popupbox.setTitle("Account Detail");
            popupbox.importContentNode(document.getElement.Id("{!$Component.popupbox}"));
            popupbox.show();
 		}
    	OpenPopup();
	</script>
    <apex:form >
    <apex:outputPanel style="display:none">
    	<apex:outputPanel id="popupbox" layout="block">
        	<p>Click OK to Cancel...</p>
        	<apex:commandButton value="Ok" onClick="popupbox.hide()" />
    	</apex:outputPanel>
	</apex:outputPanel>
 
    	<apex:pageBlock title="Accounts" >
         	<apex:pageBlockTable value="{!accnt}" var="ac" >
                <apex:column id="two">
                	<apex:commandButton value="Click" onclick="OpenPopup();" reRender="two"/>
                </apex:column>
            	<apex:column value="{!ac.Name}" />
                <apex:column value="{!ac.AccountNumber}" />
                <apex:column value="{!ac.Type}" />
                <apex:column value="{!ac.Rating}" />
                <apex:column value="{!ac.Phone}" />
                <apex:column value="{!ac.billingCity}" />
                <apex:column value="{!ac.billingCountry}" />
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Popup is not showing up and I don't understand how to display records on a popup using JavaScript. Please help me. Thanks!