I am having a visual force page with a button. On click of a button, I need to open another visual force page as popup. Also, I want to parameters through that as well .

I am able to do so using following code. But What I want is another page. Please suggest how can this be achieved.

    function hideshow(which){
    if (!document.getElementById)
    if (which.style.display=="block")

<apex:form >
    <div id="adiv" style="font:24px bold; display: block">Now you see me</div>

           <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="tstpopup"/>
               <apex:pageBlock >
                    This is just filler text from the Salesforce General. 

                <apex:outputPanel id="tstpopup">
                <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
                <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                        This is where I would put whatever information I needed to show to my end user.<br/><br/><br/>

               <apex:pageBlock title="Search" >
                    <apex:inputText value="{!searchstring}" id="theSearchstring" maxlength="100" size="100"/>
<apex:commandButton value="Go" id="submitButton" style="width:30" reRender="theSearchResults" /> </apex:pageBlock> <apex:messages />

Title Article Type Summary {!article.title}

                       <!-- // working code <a href="javascript:hideshow(document.getElementById('article'))">Click

Here {!answer} --> {!article.articleTypeLabel} {!article.abstract} Show details

            <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>


       <apex:define name="body"></apex:define> 


<style type="text/css">
        background-color: white;
        border-width: 3px;
        border-style: solid;
        z-index: 9999;
        left: 40%;
        position: absolute;
        /* These are the 3 css properties you will need to change so the popup 
        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 add 
        the height property for a fixed size pop up if you want.*/
        width: 700px;
        margin-left: -250px;
        opacity: 0.20;
        filter: alpha(opacity = 20);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9998;
 td{ vertical-align : top; text-align: left; }


2 Answers 2


Well how about this if you are ok with opening in a new tab

<apex:outputLink value="/apex/SomePage" target="_blank"  >
    <apex:param name="query" value="somevalue"/>

if not then you would have to go for some JavaScript

<apex:outputLink   onclick="openPopup('{!$Page.PageDemo}','somevalue');">

function openPopup(page,param){
    window.open(page+'?param='+param,'_blank', 'toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400')
  • It will open the page in a new window rather than a popup Commented Dec 10, 2014 at 6:32
  • updated the answer
    – AslamK
    Commented Dec 10, 2014 at 6:47

Please try with JS - Window.open(URL,Name,specs);

Sample code:

<button onclick="window.open('https://www.google.co.in','Google','height=200,width=200');">

For more details, please refer http://www.w3schools.com/jsref/met_win_open.asp

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .