@tehnrd Native Popup VF Page


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



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.