How to Create a Floating Transparent and Centered DIV using CSS

Next →

I am sure you might have come across websites that will ask you to subscribe to their newsletters by showing a small floating window at the center of the screen. Yes, you are right; it’s an alternate (but effective) solution to ugly popup windows. Here in this article, I’ll show you how to create a browser compatible, transparent and centered floating DIV using CSS.

floating DIV using CSS

See this demo

First, we'll add few controls. 2 buttons and a textbox. It’s a simple scenario. Suppose you forgot the password and clicking a button (forgot password button) will open a small floating DIV at the center of the screen.

However, the important part in this example is the CSS. That’s where you need to focus and see how to make a transparent DIV, floating at the center.

Note: I am also using jQuery to hide and show the controls. This is optional however.

The CSS

We need to add some style to the elements to our <div> float at the center.

<!DOCTYPE>
<html>
<head>
    <title>Cross browser Floating, Transparent and Centered DIV Using CSS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <style type="text/css">
        #CenterDIV {
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.75);
            width: 100%;
            height: 100%;    
            padding-top: 100px;
            display: none;
        }
        .divFloat {
            margin: 0 auto;
            background-color: #FFF;
            color: #000;
            width: 600px;
            height: auto;
            padding: 20px;
            border: solid 1px #999;
            -webkit-border-radius: 3px;
            -webkit-box-orient: vertical;
            -webkit-transition: 200ms -webkit-transform;
            box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
            display: block;
        }
        .btClickHere {
            font: inherit;
            background-color: #587898;
            color: #FFF;
            border: solid 1px #587898;
            -moz-border-radius: 0 7px 7px 0;
            -webkit-border-radius: 0 7px 7px 0;
            border-radius: 0 7px 7px 0;
            cursor: pointer;
        }        
        .btClose {
            margin: 0 auto;
            background-color: #FFF;
            font-weight: bold;
            color: red;
            border: none;
            width: auto; 
            float: right;
            clear: both;
            cursor: pointer; 
        }
        .btGetPass {
            color: #FFF;
            padding: 2px 4px;
            width: 150px;
            display: block;    
            background-color: #FF780B;
            border: solid 1px #FF780B;
            border-top-right-radius: 10px 20px;
            border-bottom-right-radius: 10px 20px;
            border-bottom-left-radius: 10px 20px;
            border-top-left-radius: 10px 20px;
            cursor: pointer;
        }
    </style>    
</head>
The Markup
<body>
    <div style="padding:20px;">
        Forgot password? 
            <input type="button" id="btClick" 
                class="btClickHere" value="Click here" />
    </div>
    <div id="CenterDIV">
        <div class="divFloat">
            <input type="button" id="btClose" class="btClose" value="Close (x)" />
            <p style="text-align: left; padding:20px 0;">Enter your email address: 
                <input type="text" id="tbEmail" style="width:300px;" maxlength="100" />
            </p>
            <p><input type="button" class="btGetPass" value="Get New Password" /></p>
        </div>
    </div>
</body>

Do you know you can add a transparent text 👇 over an image using pure CSS? Check this post.
Add transparent text on image using CSS

The Script

This is optional. I said this in the beginning. The jQuery script only shows and hides the floating DIV. The floating <div> is the result of CSS or style I have applied.

<script>
    $(document).ready(function () {
        $('#btClick').click(function () {
            $('#CenterDIV').css('display', 'block');
        });
        $('#btClose').click(function () {
            $('#CenterDIV').css('display', 'none');
        });
    });
</script>
Try it

An Overview

#CenterDIV {
    position: fixed;
    top: 0;
    background-color: rgba(255, 255, 255, 0.75);
    width: 100%;
    height: 100%;    
    padding-top: 100px;
}

ID "#CenterDIV"

The DIV will cover the entire page using its width and height property, which I have set as 100%. The idea it to disable all other controls on the page, so the focus remains on the textbox control inside the floating DIV. The floating DIV will remain at the center of the screen even when you scroll the page up and down. It will behave like a Model popup control.

See this demo

The properties position:fixed and top:0 plays an important role in this context. Setting the top property to 0 will keep the DIV always on the top.

👉 More on CSS position property: How to Float an element Right with position absolute using CSS
CSS position right example

Next →



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.
Delivered by FeedBurner