Click here to Skip to main content
15,347,685 members
Articles / Programming Languages / Javascript
Posted 2 Feb 2006


97 bookmarked

How To Make Floating and Dimming a Div using JavaScript

Rate me:
Please Sign up or sign in to vote.
4.61/5 (28 votes)
14 Feb 2006CPOL1 min read
This script allows you to simulate, dimming the page, a pop up window using a div.
Sample Image - js_floating_dimming_div.jpg


This script allows you to simulate, dimming the page, a pop up window message using a div. You can also use it to create an input window to ask for additional information.
This script has been tested only with Internet Explorer 6.0, Firefox 1.0.7 and Opera 8.51 on Windows 2003 Server.

How It Works

The first peculiarity of this script is to dim the page and to use any div, identified by an id, you write in your HTML code.
To dim the page, my code uses a dynamically added dimmer div having a semi-transparent PNG image as background. The source file contains a few PNG background images.
The script dynamically sets the dimmer's size equal to the window screen size as shown below:

// dynamically add a div to
// dim all the page
function buildDimmerDiv()
    document.write('<div id="dimmer" class="dimmer" style="width:'+
    window.screen.width + 'px; height:' + window.screen.height +'px"></div>');

And this is its CSS style:

    visibility: hidden;

    /* ieWin only stuff */
        /* with this trick only IE
           manage the following 2 attributes */
        (enabled=true, sizingMethod=scale src='honey.png');

The script changes its visibility to visible before showing the floating div.

document.getElementById('dimmer').style.visibility = "visible";

The second script's feature is the chance to move the div. We are able to do it writing handlers for the main mouse events.

function MouseDown(e)
    if (over)
        if (isMozilla) {
            objDiv = document.getElementById(DivID);
            return false;
        else {
            objDiv = document.getElementById(DivID);
            objDiv =;

function MouseMove(e)
    if (objDiv) {
        if (isMozilla) {
   = (e.pageY-Y) + 'px';
   = (e.pageX-X) + 'px';
            return false;
            objDiv.pixelLeft = event.clientX-X + document.body.scrollLeft;
            objDiv.pixelTop = event.clientY-Y + document.body.scrollTop;
            return false;

function MouseUp()
    objDiv = null;

function init()
    // check browser
    isMozilla = (document.all) ? 0 : 1;

    if (isMozilla)
        document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

    document.onmousedown = MouseDown;
    document.onmousemove = MouseMove;
    document.onmouseup = MouseUp;

    // add the div
    // used to dim the page


How To Use It

The layout of the dimmer and floating div is customizable using the dimming.css file. To use the script, first you must insert the following HTML code in the head section of your page:

<link REL=StyleSheet HREF="dimming.css" TYPE="text/css">
<script LANGUAGE="JavaScript" SRC="dimmingdiv.js">

Then define in your HTML code, a div containing the code to display:

<!--<span class="code-comment">  the following hidden div will be used by the script --></span>
<div style="width: 518px; height: 287px;visibility:hidden" id="windowcontent">
            <script language="javascript">
            function Hello()
               alert('Hello '+  document.getElementById('yourname').value + '!');
            <table >
            <tr><td colspan="2"></td></tr>
            <td>Your name:</td>
            <td><input type="text" style="width: 292px" id="yourname" /></td>
            <td colspan="2">
            <input type="button" value="Hello button" onclick="Hello();"
                style="width: 119px"/></td>
            <tr><td colspan="2">
Click the left mouse button on the blue header then move the floating div!!!</td></tr>

Call the displayFloatingDiv function to show the div. This function accepts six input parameters:

  • ID of the div to show
  • title
  • width
  • height
  • left position
  • top position

function displayFloatingDiv(divId, title, width, height, left, top)
    DivID = divId;

    document.getElementById('dimmer').style.visibility = "visible";

    document.getElementById(divId).style.width = width + 'px';
    document.getElementById(divId).style.height = height + 'px';
    document.getElementById(divId).style.left = left + 'px';
    document.getElementById(divId) = top + 'px';

    var addHeader;

    if (originalDivHTML == "")
        originalDivHTML = document.getElementById(divId).innerHTML;

    addHeader = '<table style="width:' + width + 'px" class="floatingHeader">' +
                '<tr><td ondblclick="void(0);" onmouseover="over=true;" onmouseout=
                     "over=false;" style="cursor:move;height:18px">' + title + '</td>' +
                '<td style="width:18px" align="right">
                <a href="javascript:hiddenFloatingDiv(\'' + divId + '\');void(0);">' +
                '<img title="Close..." alt="Close..." src="close.jpg" border="0" /</a>

    // add to your div an header
    document.getElementById(divId).innerHTML = addHeader + originalDivHTML;

    document.getElementById(divId).className = 'dimming';
    document.getElementById(divId).style.visibility = "visible";

A displayFloatingDiv calling example is shown below:

var w, h, l, t;
w = 400;
h = 200;
l = screen.width/4;
t = screen.height/4;

// no title
// displayFloatingDiv('windowcontent', '', w, h, l, t);

// with title
displayFloatingDiv('windowcontent', 'Floating and Dimming Div', w, h, l, t);


Firefox screenshot

An Internet Explorer screenshot.

Firefox screenshot

An Opera screenshot.


The zip source file contains the script, CSS, PNG images and a demo HTML page.
I hope you enjoy this article.



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Massimo Beatini
Web Developer
Italy Italy
No Biography provided

Comments and Discussions

GeneralDimmer only the displayed part of page Pin
kenpeck4-Mar-10 6:23
Memberkenpeck4-Mar-10 6:23 
GeneralCannot round the corner of the dimming floating division Pin
kenpeck24-Feb-10 6:20
Memberkenpeck24-Feb-10 6:20 
GeneralRe: Cannot round the corner of the dimming floating division Pin
Massimo Beatini24-Feb-10 22:15
MemberMassimo Beatini24-Feb-10 22:15 
GeneralRe: Cannot round the corner of the dimming floating division Pin
kenpeck4-Mar-10 6:26
Memberkenpeck4-Mar-10 6:26 
GeneralRe: Cannot round the corner of the dimming floating division Pin
kenpeck9-Mar-10 7:20
Memberkenpeck9-Mar-10 7:20 
GeneralFloating dimmer Pin
kenpeck19-Feb-10 3:52
Memberkenpeck19-Feb-10 3:52 
Generalfloating Div dimmer Pin
kenpeck18-Feb-10 6:44
Memberkenpeck18-Feb-10 6:44 
GeneralRe: floating Div dimmer Pin
Massimo Beatini18-Feb-10 23:13
MemberMassimo Beatini18-Feb-10 23:13 
GeneralRe: floating Div dimmer Pin
yasir7826-Jul-14 21:59
Memberyasir7826-Jul-14 21:59 
GeneralInteraction with server Pin
sigurdur einarsson6-Nov-09 4:06
Membersigurdur einarsson6-Nov-09 4:06 
Generaldisable controls problem in IE Pin
hans heijstee14-Apr-09 4:20
Memberhans heijstee14-Apr-09 4:20 
GeneralFocus doesnt come in firefox Pin
Shweta228122-Nov-07 19:36
MemberShweta228122-Nov-07 19:36 
Generalmultiple windows on same page. Pin
Dannau9-Oct-07 11:02
MemberDannau9-Oct-07 11:02 
NewsHighly Recomended... Pin
jadedgeek17-Apr-07 19:09
Memberjadedgeek17-Apr-07 19:09 
GeneralResize browser window problem Pin
developerjr21-Mar-07 21:31
Memberdeveloperjr21-Mar-07 21:31 
Generaldisplay div on top only when there is long page Pin
mosphp6-Mar-07 2:07
Membermosphp6-Mar-07 2:07 
AnswerRe: display div on top only when there is long page Pin
Massimo Beatini6-Mar-07 2:48
MemberMassimo Beatini6-Mar-07 2:48 
GeneralRe: display div on top only when there is long page Pin
mosphp6-Mar-07 5:44
Membermosphp6-Mar-07 5:44 
GeneralThanks Pin
HeavySaysHeavyDoes17-Feb-07 15:39
MemberHeavySaysHeavyDoes17-Feb-07 15:39 
Generalasp:DropDownList zOrder problem Pin
ksellers20-Jan-07 9:43
Memberksellers20-Jan-07 9:43 
AnswerRe: asp:DropDownList zOrder problem Pin
ksellers20-Jan-07 10:53
Memberksellers20-Jan-07 10:53 
GeneralRe: asp:DropDownList zOrder problem Pin
ksellers20-Jan-07 11:11
Memberksellers20-Jan-07 11:11 
GeneralRe: asp:DropDownList zOrder problem Pin
mcory20-Jun-07 2:57
Membermcory20-Jun-07 2:57 
GeneralRe: asp:DropDownList zOrder problem Pin
RichardGrimmer5-Nov-08 6:00
MemberRichardGrimmer5-Nov-08 6:00 
GeneralImportant Bug Pin
Alexandru Lungu11-Jan-07 5:32
professionalAlexandru Lungu11-Jan-07 5:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.