How to create PopUp using APEX programming (In Visualforce page) ?

Apex Controller

public class testpopup {     

    public boolean displayPopup {get; set;}  // Variable   

    

    public void closePopup() {         // method for Close PopUp

        displayPopup = false;    

    }

     

    public void showPopup() {         // method for Show PopUp

        displayPopup = true;    

    }

}

Visualforce Page

<apex:page controller="testpopup">

<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:form >

        

<apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="testpopup"/>

        <apex:pageBlock >

            This is just simple PopUp window. 

        </apex:pageBlock>

 

        <apex:outputPanel id="testpopup">

        

<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>

            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">

                This is where I would put whatever information I needed to show to my end user.<br/><br/><br/>

                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>

            </apex:outputPanel>

        </apex:outputPanel>

 

    </apex:form>

</apex:page>