Modal-style pops in Javascript and CSS

I haven't seen a simple example on how to do this, so I thought I'd post one here. I've seen the components in various places (how to center stuff, move with scrolling, etc.), but I wanted to tie it all in to one place.

Start with the actual HTML:

<div id="modalPage">
    <div class="modalBackground">
    <div class="modalContainer">
        <div class="modal">
            <div class="modalTop"><a href="javascript:hideModal('modalPage')">[X]</a></div>
            <div class="modalBody">
                <p>total solid</p>

Forget the script call there for a minute. The top level div "modalPage" acts as a big container to hide everything. The next one, "modalBackground" is the div we'll use to cover the entire page, somewhat transparent, so you can't click on stuff. The "modalContainer" div is the actual meat of stuff we want to show, which happens to contain a little window-esque header and a body element.

Next up is the CSS. There's a lot of it, but it's not very complicated.

<style type="text/css">
    margin: 0px;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px; left: 0px;
    filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
    width: 100%; height: 100%; background-color: #999999;
    position: absolute;
    z-index: 500;
    top: 0px; left: 0px;
    position: absolute;
    width: 300px;
    left: 50%;
    top: 50%;
    z-index: 750;
    background-color: white;
    border: solid 4px black; position: relative;
    top: -150px;
    left: -150px;
    z-index: 1000;
    width: 300px;
    height: 300px;
    padding: 0px;
    width: 292px;
    background-color: #000099;
    padding: 4px;
    color: #ffffff;
    text-align: right;
.modalTop a, .modalTop a:visited
    color: #ffffff;
    padding: 10px;

  • "modalPage" is set to cover the entire page, and it's set as "display: none" so that initially you can't see it.
  • "modalBackground" sets up a gray screen over the existing page. Note the hacks to get opacity to work in all of the browsers (works in Safari too). The z-index is one of several we'll set so that it's layered correctly.
  • "modalContainer" is next and is set up further in the z-index, with its top left corner positioned at the center of the page.
  • "modal" is set in the container, and will be the same size, so to make it appear in the right place, we need to set its dimensions, but make its position relative to the container. Since the container's top-left is dead center of the page, we want to go half the width and height from that spot, in a negative direction. This z-index is highest because it's on top.
  • The other elements are to setup the content in the "window" that will sit in the middle of the page.

Finally, you'll need just a little Javascript to make it work.

<script language="javascript" type="text/javascript">
function revealModal(divID)
    window.onscroll = function () { document.getElementById(divID) = document.body.scrollTop; };
    document.getElementById(divID).style.display = "block";
    document.getElementById(divID) = document.body.scrollTop;

function hideModal(divID)
    document.getElementById(divID).style.display = "none";

revealModal(divID) takes the name of the div and attaches a handler to the window's scroll event. It moves the div to the top of where ever page is, so that it moves with the page and keeps everything covered. The next line changes the display to "block" so you can see it. The third sets the div's initial position. hideModal(divID), appearing in the little link we put in there, will naturally hide it.

To make it go, just attach this onclick to a button or link or something:

<input id="Button1" type="button" value="Click here to be naughty" onclick="revealModal('modalPage')" />

That's it! 


  • Is anyone going to bother trying this out with an online demo?

  • It works just fine (IE7)

  • Just tested, works with FF,IE,Opera and Netscape. Thanks for posting it.

  • Works great in FF. It does not work in IE6 (XP SP2)

  • Works fine for me in IE6/SP2. And Safari even. :)

  • Hmmm... this doesn't seem to cove a drop down list on my page. Is there any way to make the alpha background cover that as well?

  • The Drop Down problem is a know issue of IE6. It doesn't follow the overlap rules of CSS.

  • Why not just use the ASP.NET AJAX Toolkit's ModalPopupExtender? This is an ASP.NET blog/site, isn't it? :-P

    Not to take away from your efforts, but the AJAX Toolkit is awesome.

  • I'm well aware of it, but it's too heavy and not necessary all of the time.

  • I just started using your control works great and I'm really happy that you posted it for all. Only problem I have encoutered is that the modal-ized area doesn't cover the entire page only the height of the visible browser area. So when a user scrolls down, they see the modal line and controls below the line work (when they shouldn't). this occurs in IE7 and FF. How do I get the whole page to be modalized?
    thanks very much!

  • Hi, it works well, the only question I have is how
    do I hide the modalContainer, on load and/or under a button.

    hideModal('modaContainer') does not work for me..


  • This popup need to draggable. Than It will be usefull other wise it not have any value. Try to do it.

  • Yes sir! As you wish!


    Seriously, what is that? It had plenty of value for what I needed it to. There was no need to drag it anywhere when it only existed to hold a yes or no button. Besides, you aren't supposed to be able to click on anything under it.

  • Does not work for IE6...
    I'm using Windows XP SP 2 Home Edition

  • It doesn't work with IE6 SP. Any suggestions please?

  • the modal window works but when it scrolls down the contents below is shown. this can be fixed by disabled the scroll bars using javascript. this works only with IE and not in Firefox. any workarounds for this?

  • Great tip Ben, this works perfectly for FF/Safari.
    Has anyone solved the IE issues? The fixed doesn't seem to work in IE6 and the content behind the div is still clickable. It doesn't show the grayed out div. Not sure why.
    See it here: If you click the click this link

  • I just revisited this recently, the issue in IE is that surrounding HTML/CSS can drastically alter the results. So if it doesn't work in IE, there's something up the cascade or DOM that's affecting it adversely.

  • Hmmm... that's odd as I tried this out on a somewhat complex page, but the first thing in the html, directly under body is the modalDiv. So looking at the dom inspector, this is really the first item. I'll work through it though by removing elements and see if I can source out the problem.

    On a side note, if your modal div is going to be large enough to possibly cause horizontal scrolling, this may be due to some of the css here.

    If you position the .modalContainer at 50% and then position .modal at - 1/2 the width, the width of .modalContainer may still cause horizontal scrolling, even though it doesn't appear that anything should. One should actually move .modalContainer back 1/2 and just position .modal in the middle of it. Use this css:

    position: absolute;
    width: 750px;
    height: 425px;
    left: 50%;
    top: 50%;
    z-index: 750;
    background-color: white;
    border: solid 8px #666;
    position: relative;
    z-index: 1000;
    width: 750px;
    height: 450px;
    padding: 0px;

    Or something to that affect

  • Doesn't the link I posted above solve these IE6 issues?

  • I must have missed this... Works perfectly! I used the * html selector bug that occurs in IE5 and IE6 for that statement, so it doesn't affect any standards compliant browsers like firefox, and doesn't affect IE7 either.
    I couldn't see how to use a fixed modal window though, Tried changing the position:absolute to fixed, and it just pushed all my content under the #modalPage. This post mentions something about quirks mode (which I refuse to use) but the whole modal part works anyway.

  • i use it for window, so I added event handler. Now I can add to my asp page dynamically:
    Javascript code:
    window.onload = fhandler;

    function fhandler(e)

  • Thanks man works great in ie7

  • The Modal Pop up Back ground Transparent Screen is work fine (covering the whole page ) in IE7 while it is not working Fine in IE6 , in IE6 the Transparent screen start where the modal pop up start instread it should cover the whole page

  • Ben, I was having the problem of the div not covering the whole scrollable area, only the browser height.

    I'm actually not using any of this code, rather I'm using my own .NET control I've written, but it's the same problem nonetheless.

    Changing my CSS from absolute to fixed did the trick perfectly.

    Very useful to know for future reference.

    Thank you,


  • Strange. Mine doesn't work in FF/IE6 or Safari. Works like a charm in IE7.

    Any ideas where to look for problems with Firefox?

  • Great piece of work, but I am having problem when I have a master page in my .aspx page in IE6? It does not seams to be working on IE6 but works fine with FF.

    It works fine with IE6 if there is no master page.

  • I am also using a master page with IE6 and this does not work. I am trying to use this in an IE6 only environment so if anyone has a solution i would be glad for the assistance.


  • Very good, its really simple. I was searching for such a functionality and found this finally. Thanks a lot Jeff.

  • This code doesn't work if you are using IE 6.0 and Master pages, Do you know why...?.

  • It does not covers the dropdownlist on the page, any solution

  • There is an error in the script. I dont know how that occured, while posting.
    have to be replaced with

    BTW, i like the code.
    thanks a lot.

  • Thanks abhilashca re: the a href tip.

  • When you close the modal popup and try to reopen it doesn't work. This is the case in IE in other browsers it works fine. Any idea why?

  • Excellent work Jeff, its light weight and only what you need. I just modified for XMLHttpRequest and is working like a charm!
    Thanks Alot.

  • awsome very simple, most ppl out there putting complicated stuff

  • Thanks for the bit of code.
    consider using if you wish

    it worked in ie8 in compatibility mode

  • its really usefull but not working in IE6

    thanks anybody can solve

  • Rafik gets my douchebag of the year award. What a jerk.

  • For what year?

  • hi guys...just wanted to say thanks for this

    i had been surfing the net reading a heap of various ways to do this and starting with a clean html page it quickly came together with modifications


  • Works excellent once you include the scrolling update by "Ben".

    IE 6 is irrelevant by the way. ;)

  • Well the post is four years old...

  • Thanks. This saved me a whole lot of time. I have finally taken up web programming after many years of being a db developer !

  • works great! thanks, i have been searching for this for some time.

  • ajax control tool kit is cool to say the least but it adds 6 mb to your web solution folder. Good option would be to make it lightweight using javascript/css, jquery

  • its working great in IE,FF,Chrome also....thanks again

  • Great post, thanks!

  • Works like a charm!!

  • Jeff.
    Great Code but I have one more question. I am using a menuitem in a grid item to call the modal popup form to do an something... everything work fine except when scrooling the grid and opening the popup. the popup alway opens to the center top. I tried to modified the #modalContainer but can't get the popup to maintain the grid scrool location.
    can you point me to the right direction

  • At a glance I can't see why you need the modalContainer; can you not apply the transparency and z-index to the modalPage class?

  • very good, simple and fast!
    thank's a lot!

  • There needs to be a way to upvote this post so it won't go away. This post helped me a lot when I was trying to figure out how to do a modal popup with pure CSS and raw JavaScript. To that effect, I owe Mr. Putz a Pizza!!!

  • this has a lots of flaws, I tried it and it is'nt working properly.

  • Well fortunately this post is six years old and it's easier to just use jQuery UI.

  • This works great for me in IE but in FF and Chrome it does not. For both of those it seems to be putting the popup in the bacground as well. It is dim grey like the background. Any ideas?

  • Sorry about that. I had my divs incorrect. It works great now.

Comments have been disabled for this content.