PopUp Box In Visualforce Page

Controller Code :-

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;
        return null;
    }
}

Visuslforce Page :-

<apex:page standardController="Account" extensions="TestPopup" sidebar="false" showheader="false">
<apex:form >
<apex:pageBlock >
<table align ="center" >
  <tr><td>
   
<apex:commandButton value="Display PopUp Message" action="{!showPopup}" rerender="popup" status="status"/>
</td></tr>
</table>
 <br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br> 
 
 
             <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>
                     <br></br><br></br>
                     Boost your productivity by working on the go. Learn how to add your email account to
                           your mobile device, and how to set up popular Office apps like Word, Excel, PowerPoint, and OneNote on your tablet or smart phone.
                           To get started, choose your mobile device's operating system . 
                    
                     <br></br>
                     <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;
    width: 300px;
    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>

Output Screen 1 :-







Output Screen 2 :-

Other PopUp Examples :-
http://sforceforyou.blogspot.in/2016/08/popup-box-in-visualforce-page.html