function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
pa_sfdcpa_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.

 

 

Best Answer chosen by Admin (Salesforce Developers) 
TehNrdTehNrd

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

Message Edited by TehNrd on 07-31-2009 01:32 PM

All Answers

TehNrdTehNrd

Here is my attempt at a 100% native Visualforce pop up requiring no javascript.

 

http://www.tehnrd.com/visualforce-pop-up/

 

-Jason

Message Edited by TehNrd on 07-30-2009 08:41 AM
pa_sfdcpa_sfdc

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

TehNrdTehNrd

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

Message Edited by TehNrd on 07-31-2009 01:32 PM
This was selected as the best answer
TehNrdTehNrd

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

Message Edited by TehNrd on 07-31-2009 10:03 AM
pa_sfdcpa_sfdc

It was overlaying vertically.

 

It works fine by removing the height property.

 

thanks

 

Message Edited by pa_sfdc on 08-02-2009 09:56 PM
Big EarsBig Ears

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 

 

 

TehNrdTehNrd

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"/>

 

 

 

Big EarsBig Ears

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 

TehNrdTehNrd

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

 

 

Message Edited by TehNrd on 08-19-2009 01:36 PM
Big EarsBig Ears
Thank you!
amar joshiamar joshi

<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;

} 

Message Edited by amar joshi on 08-31-2009 04:16 PM
Message Edited by amar joshi on 08-31-2009 04:17 PM
Message Edited by amar joshi on 08-31-2009 04:19 PM
TechNINJATechNINJA

Hello Amar, please contact me at ramavataar@yahoo.com in case you are looking for good SalesForce opportunities in TOP MNC.

 

Regards

Ram

jotr408jotr408

How do you add this to a custom object that wasn't creating using VF?  

Creating Splash ScreensCreating Splash Screens
I want to re render the login page instead of form1 what would u suggest i use.Please help.
Maria JosephMaria Joseph
@TehNrd> datePicker issues works in pop up window. Thanks..