How to open a visual force page as modal window from another visual force page

Question

I have visual force page with a custom "Login" button.I need to open login visual force page as modal window, when we click on login button.

I have implemented the code like below:

<apex:commandButton id="Login" onclick="OpenLoginwindow()" value="Log In"/>

function OpenLoginwindow(){var newWin = window.open('apex/Login','PopUp','height=500,width=600,left=150,top=100,resizable=no,scrollbars=yes,toolbar=no,status=no');
    }

Here the login page is showing in new window.

But, I want to open login page in a modal window like below:

Please anyone suggest how can I achieve this.

Thanks,

Answer 1

The word "popup" generally means a page opening in new window in front of the current window (see e.g. the Mozilla explanation). It sounds like you want a "modal" instead. You can find a few examples here.

If you are after a modal, Jason "tehnerd" Venable writes a good explanation of how you can create one in Visualforce.

The VF page:

<apex:page controller="popup">
    <apex:form >
        <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="popup"/>
        <apex:pageBlock >
            Lorem ipsum ..... dummy stuff to show the popup is above content
        </apex:pageBlock>

        <apex:outputPanel id="popup">
            <apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
                <iframe src="http://example.com/myvisualforcepage"></iframe>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="popup"/>
            </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>

The controller:

public class popup {

    public boolean displayPopup {get; set;}

    public void closePopup() {
        displayPopup = false;
    }

    public void showPopup() {
        displayPopup = true;
    }
}