Cross browser Floating, Transparent and Centered DIV Using CSS

I am sure 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, where suppose a user forgets the password and clicking a 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 a little bit of jQuery to hide and show the controls.

The CSS
<!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">
        body  {
            font:14px Sans-Serif;
        }
        #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;
            font: inherit;
            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: inherit;
            font-weight: bold;
            color: red;
            border: none;
            width: auto; 
            float: right;
            clear: both;
            cursor: pointer; 
        }
        .btGetPass {
            font: inherit;
            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>

Related: How to Add a Transparent Text over Image using CSS

The Script

The jQuery script only shows and hides the floating DIV.

<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;
    display: none;
}

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 will remain at the center of the screen even when you scroll the page down or up. 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 its top to 0 will keep the DIV always on the top.

Next →



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

Enter your email id

Delivered by FeedBurner

Related Posts: