2

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.

Thanks,

4

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;
    }
}
  • Thanks for Reply. But in my scenario i need to open new visualforce page in panel. – Murali Mohan M Sep 21 '15 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 '15 at 10:29
  • This link above referencing tehnerd is incorrect or no longer active. – Maggie Jan 15 at 23:54

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.