Revision: 30005
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at August 6, 2010 02:55 by d3developer
Initial Code
<apex:page controller="popup">
<apex:form >
<apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="popup"/>
<apex:pageBlock >
Lorem ipsum ..... dummy stuff to show the popup is above content
</apex:pageBlock>
<apex:outputPanel id="popup">
<apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
Lorem ipsum <br/><br/><br/>
<apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="popup"/>
</apex:outputPanel>
</apex:outputPanel>
</apex:form>
<style type="text/css">
.customPopup{
background-color: white;
border-style: solid;
border-width: 2px;
left: 50%;
padding:10px;
position: absolute;
z-index: 9999;
/* These are the 3 css properties you will need to tweak so the pop
up displays in the center of the screen. First set the width. Then set
margin-left to negative half of what the width is. You can also add
the height property for a fixed size pop up.*/
width: 500px;
margin-left: -250px;
top:100px;
}
</style>
Initial URL
Initial Description
Initial Title
@tehnrd Native Popup VF Page
Initial Tags
Initial Language
Other