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 Dec 10, 2014 at 6:32
  • updated the answer
    – AslamK
    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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.