How to show home page of app as transparent when logging in?

Posted on 2006-05-13
Last Modified: 2013-12-24

I have a web app that when the user clicks on the home page link, if the user is not logged in then they are taken to the login page.  This process works fine.

I want to change this to when the user goes to the home page and has not logged in, the home page of the app shows up as simi-transparent and the login page pops up, then after the user has logged in the home page shows in regular mode.

Has anyone done something like this?
Any similiar examples would be appreciated.

Question by:g118481
    LVL 2

    Accepted Solution

    First off, in your css you need to set up a class for your transparecy DIV and the DIV that will contain your login form.

        width: 100%;
        height: 100%;
        background-color: white;
        opacity: .8;
        filter: alpha(opacity=80);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;

        width: 100%;
        height: 100%;
        vertical-align: middle;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;  

    Then, in your index.cfm file you can place an if statement right after your <body> tag that will fade the page and show the login form if the user is not already logged in  (in this I'm just checking to see if session.loggedIn is true since I don't know what you're using to check logged in status)


    <cfif session.loggedIn neq 1>
        <div class="transDiv">
        <div class="loginDiv" align="center">
            --------   CODE FOR YOUR LOGIN FORM GOES HERE -----

    -------------------  REST OF PAGE  ----------------------------

    Let me know if that works for you
    LVL 7

    Expert Comment

    A note about this technique: IE and other browsers handle Alpha transparency differently, so make sure you include code for both. Believe it or not, a lot of folks have given IE the boot.

    LVL 2

    Expert Comment

    That's very true, which I forgot to explain above.  The "opacty: .8;" line is for Firefox, Opera, and other standards compliant browsers.  The "filter: alpha(opacity=80);" line is for IE.  I've tested the above in several different browsers and it seems to be fairly portable.  Did this solution work for you?

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Superior storage. Superior surveillance.

    WD Purple drives are built for 24/7, always-on, high-definition security systems. With support for up to 8 hard drives and 32 cameras, WD Purple drives are optimized for surveillance.

    A web service ( is a software related technology that facilitates machine-to-machine interaction over a network. This article helps beginners in creating and consuming a web service using the ColdFusion Ma…
    Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
    Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
    This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor ( If you're looking for how to monitor bandwidth using netflow or packet s…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now