PageBlock as a Popup in Visualforce

Displaying A section as a Popup in a visulaforce.

when we need to display a popup in visulaforce, used to create a new Vf page with required content to display in popup and that page being opened as a popup page on some event in the page.

But if we need to open a section/Pageblock of a VF page as a popup,How can we do it?

I am using this below code to display the pageblock(Yellow marked) as a popup page.

I have a button(Red Marked)  in the page as "Create New lead" and displaying a popup on click of that button, DIsplaying yellow marked Pageblock as a popup. I have used controller method to set showPopup as True on Click of the create a New Lead button and rerendering the  section to display popup, and all 

Code snippet for Popup

             <apex:form >

                 <apex:sectionHeader title="Create a new Lead"/>

                 <div style="text-align:center">

                 <apex:commandButton value="Create New Lead" action="{!showPopup}" rerender="tstpopup" />

                </div>

                <apex:outputPanel id="tstpopup">

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

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

                    <!-- This pageblock being open as Popup-->  

 <apex:pageBlock >

                        <apex:pageBlockButtons >

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

                            <apex:commandButton value="Cancel" action="{!closePopup}" rerender="tstpopup" immediate="true"/>

                        </apex:pageBlockButtons>

                        <apex:pageBlockSection >

                             <apex:inputField value="{!leadToCreate.FirstName}" required="true"/>

                             <apex:inputField value="{!leadToCreate.LastName}"/>

                             <apex:inputField value="{!leadToCreate.email}" required="true"/>

                             <apex:inputField value="{!leadToCreate.phone}" required="true"/>

                             <apex:inputField value="{!leadToCreate.company}"/>

                        </apex:pageBlockSection>

                    </apex:pageBlock>

                </apex:outputPanel>

        </apex:outputPanel>

    </apex:form>

Style sheet used in this page:

  <style type="text/css">

        .custPopup{

            background-color: white;

            border-width: 2px;

            border-style: solid;

            z-index: 9999;

            left: 50%;

            padding:10px;

            position: absolute;

            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>

Controller logic:

public class LeadConsoleController{

    public boolean displayPopup {get; set;}     

    

    public void closePopup() {

       //to ignore required fiedl

          

        displayPopup = false;    

    }     

    public void showPopup() {        

        displayPopup = true;    

    }

    

    public lead leadToCreate{get;set;}

    public LeadConsoleController(){

        leadToCreate = new lead();

    }

    public void save(){

        leadToCreate.ownerId = userinfo.getUserId();

        leadToCreate.status='Open - Not Contacted';

        insert leadToCreate;

        closePopup();

    }

}