Open a Visual force page as pop up from another visual force page with parameters

Question

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)
    return
    if (which.style.display=="block")
    which.style.display="none"
    else
    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:pageBlock>

                <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"/>
                        &nbsp;
<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:outputPanel>



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

</apex:form>

<style type="text/css">
    .custPopup{
        background-color: white;
        border-width: 3px;
        border-style: solid;
        z-index: 9999;
        left: 40%;
        padding:10px;
        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;
        top:100px;
    }
    .popupBackground{
        background-color:black;
        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; }


</style>

Answer 1

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

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

if not then you would have to go for some JavaScript

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

<script>
function openPopup(page,param){
    window.open(page+'?param='+param,'_blank', 'toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400')
}
</script>

Answer 2

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');">
  Click
</button>

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