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: enter image description here

Please anyone suggest how can I achieve this.


1 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: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"/>


    <style type="text/css">
            background-color: white;
            border-style: solid;
            border-width: 2px;
            left: 50%;
            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;

The controller:

public class popup {

    public boolean displayPopup {get; set;}

    public void closePopup() {
        displayPopup = false;

    public void showPopup() {
        displayPopup = true;
  • Thanks for Reply. But in my scenario i need to open new visualforce page in panel. Sep 21, 2015 at 10:26
  • Hi Murali, change the contents of the popup outputPanel to an iframe containing your other page. I've updated the example.
    – Rob
    Sep 21, 2015 at 10:29
  • This link above referencing tehnerd is incorrect or no longer active.
    – Maggie
    Jan 15, 2019 at 23:54

You must log in to answer this question.

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