Advanced Search

@tehnrd Native Popup VF Page

/ Published in: Other
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <apex:page controller="popup">
  2.     <apex:form >
  3.         <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="popup"/>
  4.         <apex:pageBlock >
  5.             Lorem ipsum ..... dummy stuff to show the popup is above content
  6.         </apex:pageBlock>
  7.  
  8.         <apex:outputPanel id="popup">
  9.             <apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
  10.                 Lorem ipsum <br/><br/><br/>
  11.                 <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="popup"/>
  12.             </apex:outputPanel>
  13.         </apex:outputPanel>
  14.  
  15.     </apex:form>
  16.  
  17.     <style type="text/css">
  18.        .customPopup{
  19.             background-color: white;
  20.             border-style: solid;
  21.             border-width: 2px;
  22.             left: 50%;
  23.             padding:10px;
  24.             position: absolute;
  25.             z-index: 9999;
  26.             /* These are the 3 css properties you will need to tweak so the pop 
  27.             up displays in the center of the screen. First set the width. Then set 
  28.             margin-left to negative half of what the width is. You can also add 
  29.             the height property for a fixed size pop up.*/
  30.             width: 500px;
  31.             margin-left: -250px;
  32.             top:100px;
  33.         }
  34.     </style>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.