Apex Code Development You need to sign in to do that
Don't have an account?
pa_sfdc Best way to show Pop up in a visual force page
Is there a easy way to show pop up from a visual force page, without linking it to another visual force page.
I want to show some information .
I have seen example of yahoo model dialogue box.
I am in process of creating a 100% native application, I do nt want to call to any external js libraries.
Ahh man you had to throw a curve ball at me ;) .
When you say it overlays do you mean vertically or horizontally. I hope you meant vertically as this is actually a pretty easy fix. In the css set the height to 100% instead of a fixed height. This should cause the size of the popup to scale vertically.
In testing I realized that setting the height to 100% works fine in the normal salesforce.com UI but if the page is on force.com sites the height property is ignored. Another option is to remove the height property all together and the popup should scale vertically to the content.
Let me know if this works for you.
-Jason
All Answers
Here is my attempt at a 100% native Visualforce pop up requiring no javascript.
http://www.tehnrd.com/visualforce-pop-up/
-Jason
Thanks Jason,
Thanks, this is really great...
This works great for fixed content for which we know it is going to fit within the Output Panel.
If a data table / panel grid needs to be displayed with variable amount of data and ifdata exceeds the size of popup panel then it just overlays on the page.
Can you think of any way so we can have the contents within popup outtpanel be displayed with scroll bars..
I again appreciate it, this was really a brilliant idea!!1
Ahh man you had to throw a curve ball at me ;) .
When you say it overlays do you mean vertically or horizontally. I hope you meant vertically as this is actually a pretty easy fix. In the css set the height to 100% instead of a fixed height. This should cause the size of the popup to scale vertically.
In testing I realized that setting the height to 100% works fine in the normal salesforce.com UI but if the page is on force.com sites the height property is ignored. Another option is to remove the height property all together and the popup should scale vertically to the content.
Let me know if this works for you.
-Jason
I don't know what is up with the height property. Not having it at all seems to work the best as the height will scale to the size of the content. I have updated the css and markup in my orignal blog post.
-Jason
It was overlaying vertically.
It works fine by removing the height property.
thanks
This is great!
I'm finding that Date and Date/Time input fields aren't rendering correctly. Is anybody else finding this?
Date input field: the calendar widget doesn't pop-up
Date/Time input field: the input fields don't render so the user cannot input info
Asides from that, this functionality is incredibly useful.
Andy
This has to do with the way visualforce loads the popup tool for dates. If the input field is not present on the page when the page first loads the javascript for this nifty date popup will not load either. Good news is that there is a very easy fix.
//In the controller/extension add: public Opportunity dummyOpp {get; set;} //At the botton of the page add: <apex:inputField value="{!dummyOpp.Closedate}" id="dummy" style="visibility:hidden" required="false"/>
Thanks for your response. You're being very patient with me.
I see now that the widget pops up, unfortunately, it pops up beneath the outputpanel popup. Do you know if there is any way to avoid this?
With thanks,
Andy
Add this little bit of css:
.datePicker{
z-index:10000;
}
z-index doesn't need to be 10000 exactly but it must be higher than the z-index of .customPopup
-Jason
<apex:page controller="popup" id="page1">
<apex:form id="form1">
<apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="popup"/>
<apex:pageBlock >
Ohhh my..... dummy stuff to show the popup is above content
<p/>
<apex:outputText value="Your Value Entered in popup is:" rendered="{!if(amar!=null,true,false)}"/>
<apex:outputText value="{!amar}"/>
<apex:inputHidden value="{!HiddenVal}"/>
</apex:pageBlock>
<apex:outputPanel id="popup">
<apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
Nice one na....<br/><br/><br/>
<apex:outputText value="Enter The Value"/>
<apex:inputText value="{!HiddenVal}"/>
<apex:commandButton value="Submit" action="{!closePopup}" rerender="form1"/>
</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>
</apex:page>
Controller
public class popup
{
public boolean displayPopup {get; set;}
public String amar {get; set;} public String HiddenVal {get;set;}
public void closePopup()
{
displayPopup = false;
amar = HiddenVal;
}
public void showPopup()
{
HiddenVal ='';
displayPopup = true;
}
}
Hello Amar, please contact me at ramavataar@yahoo.com in case you are looking for good SalesForce opportunities in TOP MNC.
Regards
Ram
How do you add this to a custom object that wasn't creating using VF?