Pop up box in Visuaforce

Displaying popup box in Visualforce:

VF Code:

<apex:page controller="tstpopup">
    <apex:form >
        <apex:pageBlock >
        <apex:pageBlockSection >
        <apex:pageBlockSectionItem >
        <apex:commandButton value="Show" action="{!showPopup}" rerender="tstpopup"/>
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem >
        <apex:outputtext value="{!distext}" />
        </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
        </apex:pageBlock>
        <apex:outputPanel id="tstpopup">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
        <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
        <apex:pageBlock >
        <apex:pageblockSection columns="1">
        <apex:pageblockSectionItem >
        <apex:outputLabel value="Subject" id="sub"/>
        <apex:inputText value="{!textarea1}"/>
        </apex:pageblockSectionItem>
        <apex:pageBlockSectionItem >
        <apex:outputLabel value="Description"/>
        <apex:inputTextarea value="{!descr}"/>
        </apex:pageBlockSectionItem>
        </apex:pageblockSection>
        </apex:pageBlock>
        <apex:commandButton value="Hide" action="{!closePopup}" rerender="tstpopup"/>
        </apex:outputPanel>
        </apex:outputPanel>
     </apex:form>
    <style type="text/css">
        .custPopup{
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            padding:10px;
            position: absolute;
            /* These are the 3 css properties you will need to change so the popup
            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 add
            the height property for a fixed size pop up if you want.*/
            width: 500px;
            margin-left: -250px;
            top:100px;
        }
        .popupBackground{
            background-color:black;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9998;
        }
    </style>
</apex:page>

Controller Code:


public class tstpopup
{
    public String distext { get; set; }
    public String descr { get; set; }
    public String textarea1 { get; set; }
    public boolean displayPopup {get; set;}      
    public void closePopup()
    {      
        displayPopup = false;
    }  
    public void showPopup()
    {      
        displayPopup = true;  
    }
    public void getdistext()
    {
        distext='praveen';//textarea1+'\n'+descr;
    }
}