How to create popup from Visualforce page?

<apex:page standardController="Contact" extensions="TestPopup">

<apex:form >
<apex:pageBlock >
<apex:commandButton value="show popup" action="{!showPopup}" rerender="popup" status="status"/>

<apex:outputPanel id="popup">

<apex:outputPanel id="popInnerOutputPnl" styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
<apex:commandButton value="X" title="Close the popup" action="{!closePopup}" styleClass="closeButton" rerender="popup">
</apex:commandButton>
<apex:pageblockSection >

<apex:pageblockSectionItem >
<apex:outputLabel value="Email" for="address"></apex:outputLabel>
<apex:inputField id="address" value="{!Contact.Email}"/>
</apex:pageblockSectionItem>
</apex:pageblockSection>
<apex:commandButton value="Ok" action="{!redirectPopup}" styleClass="closeButton" rerender="popup">
</apex:commandButton>
</apex:outputPanel>
</apex:outputPanel>

</apex:pageBlock>

</apex:form>

<style type="text/css">
.customPopup {
background-color: white;
border-style: solid;
border-width: 2px;
left: 20%;
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: 500px;
top: 20%;
}

.disabledTextBox {
background-color: white;
border: 1px solid;
color: black;
cursor: default;
width: 90px;
display: table;
padding: 2px 1px;
text-align:right;
}

.closeButton {
float: right;
}
</style>
</apex:page>

public with sharing class TestPopup {

public Boolean displayPopup {get;set;}

public TestPopup(ApexPages.StandardController controller) {

}

public void showPopup()
{

displayPopup = true;
}

public void closePopup() {
displayPopup = false;

}

public PageReference redirectPopup()
{
displayPopup = false;
//Please uncomment below 3 statements and replace YourObjectId
// PageReference p=new Pagereference('/'+YourObjectId);
// p.setRedirect(true);
// return p;

}
}

Hope this helps you.

Hello,

Refer the following code:

<apex:page standardController=”Contact” extensions=”TestPopup”>

<apex:form >
<apex:pageBlock >
<apex:commandButton value=”show popup” action=”{!showPopup}” rerender=”popup” status=”status”/>

<apex:outputPanel id=”popup”>

<apex:outputPanel id=”popInnerOutputPnl” styleClass=”customPopup” layout=”block” rendered=”{!displayPopUp}”>
<apex:commandButton value=”X” title=”Close the popup” action=”{!closePopup}” styleClass=”closeButton” rerender=”popup”>
</apex:commandButton>
<apex:pageblockSection >

<apex:pageblockSectionItem >
<apex:outputLabel value=”Email” for=”address”></apex:outputLabel>
<apex:inputField id=”address” value=”{!Contact.Email}”/>
</apex:pageblockSectionItem>
</apex:pageblockSection>
<apex:commandButton value=”Ok” action=”{!redirectPopup}” styleClass=”closeButton” rerender=”popup”>
</apex:commandButton>
</apex:outputPanel>
</apex:outputPanel>

</apex:pageBlock>

</apex:form>

<style type=”text/css”>
.customPopup {
background-color: white;
border-style: solid;
border-width: 2px;
left: 20%;
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: 500px;
top: 20%;
}

.disabledTextBox {
background-color: white;
border: 1px solid;
color: black;
cursor: default;
width: 90px;
display: table;
padding: 2px 1px;
text-align:right;
}

.closeButton {
float: right;
}
</style>
</apex:page>

public with sharing class TestPopup {

public Boolean displayPopup {get;set;}

public TestPopup(ApexPages.StandardController controller) {

}

public void showPopup()
{

displayPopup = true;
}

public void closePopup() {
displayPopup = false;

}

public PageReference redirectPopup()
{
displayPopup = false;
//Please uncomment below 3 statements and replace YourObjectId
// PageReference p=new Pagereference(‘/’+YourObjectId);
// p.setRedirect(true);
// return p;

}
}

Hope this helps you.