+ Start a Discussion

show lightbox on click in detailpage link button

hi , pls help me out  for open visualforce page as lightbox on clicking detail page link button



you can use the Lightbox Visualforce component provided by force.com labs to call a visualforce page


The link for the App on Appexchage is 




This is a free app which has a visual force component <c:lightbox>


This App has the following properties:

* They "grey out" the rest of the page behind the component, making the page unclickable until the lightbox is dismissed
* They can be dragged around the screen by dragging on the title bar
* They can contain any content you like, including a Visualforce page (use an iframe inside the lightbox)

On the VF page where you'd like to use a lightbox, include this Visualforce code:

<c:lightbox function="lbconfirm" width="500" title="TwitterForce" content="Changes saved successfully." duration="2000" />

FUNCTION = the name of the javascript function to call
WIDTH = the width, in pixels, of the lightbox
TITLE = the title text on the lightbox
CONTENT = the text or HTML content of the lightbox
DURATION = the amount of time, in milliseconds, to display the lightbox (or 0 for an untimed lightbox)

Then, use a javascript event on the same Visualforce page to launch your lightbox, like this:

<apex:commandbutton oncomplete="lbconfirm();" value="Save" action="{!doSave}" />

Note that the javascript event (oncomplete, in this case) matches the FUNCTION name specified in the component.


Hope this helps.



Hi - I am trying to invoke the lightbox component on page load in my test org, and it works as long as I keep the commandbutton on the page.  But I don't want a commandbutton - I just want this to run everytime the page loads.  When I comment out/remove the apex:commandbutton line, the body onload function doesn't work. Thanks!


<apex:page showHeader="false" sidebar="false" >
<c:lightbox function="lbconfirm" width="500" title="My Alert"
content="<iframe src='/apex/testpopup' style='border:0; width:500px; min-height: 170px' &gt;&lt;/iframe&gt;" duration="0" />
<apex:form >
<body onload="lbconfirm();">
<h1>This is the portal home page</h1><p/><p/>
<apex:commandbutton rendered="true" onclick="lbconfirm();" value="Save" action="{!doSave}" />