Creating Model dialog using Visual force

Below is the example to add a model dialog in you visual force page. This dialog can be rendered conditionally. On displaying this dialog, the rest of the visual force page freezes and user cannot click anywhere else on the page. 

Step 1– Create a model component

<apex:component layout="block">
    <apex:attribute name="id" type="string" required="true" description="The id of the dialog"/>
    <apex:attribute name="visible" type="boolean" description="Whether the dialog is visible or not"/>
    <apex:attribute name="bgcolor" type="string" default="white" description="Background color of the dialog"/>
    <apex:attribute name="border" type="string" default="2" description="Width of the dialog border in px"/>
    <apex:attribute name="width" type="string" default="80%" description="Width of the dialog"/>
    <apex:attribute name="height" type="string" default="80%" description="Height of the dialog"/>
    <apex:attribute name="top" type="string" default="10%" description="Top of the dialog"/>
    <apex:attribute name="left" type="string" default="10%" description="Left of the dialog"/>
    <apex:attribute name="overflow" type="string" default="visible" description="Overflow behaviour i.e. scroll/auto/hidden"/>

    <apex:outputPanel >
        <apex:outputPanel styleClass="{!id}dialogBackground" layout="block" rendered="{!visible}" />
        <apex:outputPanel styleClass="{!id}dialogStyle" layout="block" rendered="{!visible}" >      
            <apex:componentBody />
        </apex:outputPanel>
    </apex:outputPanel>
   
    <style type="text/css">
        .{!id}dialogStyle
        {
            background-color: {!bgcolor};
            border-width: {!border}px;
            border-style: solid;
            z-index: 9999;
            padding:10px;
            position: fixed;
            overflow: {!overflow};
            width: {!width};
            height: {!height};
            left: {!left};
            top: {!top};
        }
        .{!id}dialogBackground
        {
            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:component> 

Step 2– Add this component in Visual force page where you want to add a model dialog.

<c:ModalDialog id="myModelDialog" visible="{!displayModelDialog}" border="5" width="80%" height="80%" overflow="auto" left="10%" top="10%">
         <!-- Here you can add body of the model dialog -->
         <h1> This is your model dialog <h1>

</c:ModalDialog>