Jeff and .NET

The .NET musings of Jeff Putz

Sponsors

News

My Sites

Archives

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>
    <div class="modalContainer">
        <div class="modal">
            <div class="modalTop"><a href="BLOCKED SCRIPThideModal('modalPage')">[X]</a></div>
            <div class="modalBody">
                <p>total solid</p>
            </div>
        </div>
    </div>
</div>

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">
body
{
    margin: 0px;
}
#modalPage
{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px; left: 0px;
}
.modalBackground
{
    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;
}
.modalContainer
{
    position: absolute;
    width: 300px;
    left: 50%;
    top: 50%;
    z-index: 750;
}
.modal
{
    background-color: white;
    border: solid 4px black; position: relative;
    top: -150px;
    left: -150px;
    z-index: 1000;
    width: 300px;
    height: 300px;
    padding: 0px;
}
.modalTop
{
    width: 292px;
    background-color: #000099;
    padding: 4px;
    color: #ffffff;
    text-align: right;
}
.modalTop a, .modalTop a:visited
{
    color: #ffffff;
}
.modalBody
{
    padding: 10px;
}
</style>

  • "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).style.top = document.body.scrollTop; };
    document.getElementById(divID).style.display = "block";
    document.getElementById(divID).style.top = document.body.scrollTop;
}

function hideModal(divID)
{
    document.getElementById(divID).style.display = "none";
}
</script>

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! 

Comments

SelfishGene said:

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

# October 25, 2006 7:40 PM

Anatoly said:

It works just fine (IE7)

# October 26, 2006 3:18 AM

Mihir Solanki said:

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

# October 26, 2006 6:12 AM

Yong said:

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

# October 26, 2006 7:52 AM

Jeff said:

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

# October 26, 2006 8:57 AM

Jeremy said:

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?

# October 31, 2006 11:08 PM

David said:

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

# November 5, 2006 2:54 PM

Michael Flanakin said:

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

http://ajax.asp.net/ajaxtoolkit/ModalPopup/ModalPopup.aspx

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

# November 6, 2006 8:30 AM

Jeff said:

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

# November 6, 2006 9:04 AM

Jason said:

I just started using your control here...it 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!

-jason

# March 20, 2007 11:38 AM

jack said:

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..

Thanks

# July 19, 2007 7:34 AM

Rafik Mondal said:

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

# August 3, 2007 8:29 AM

Jeff said:

Yes sir! As you wish!

/sarcasm

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.

# August 3, 2007 8:56 AM

Philip said:

Does not work for IE6...

I'm using Windows XP SP 2 Home Edition

# August 21, 2007 3:10 AM

Vijay said:

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

# September 12, 2007 4:51 AM

Shoukath said:

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?

# November 13, 2007 1:23 AM

Brad said:

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:wattintl.bcomsolutions.ca  If you click the click this link

# February 4, 2008 2:08 PM

Jeff said:

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.

# February 4, 2008 2:38 PM

Brad said:

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:

.modalContainer{

position: absolute;

width: 750px;

               height: 425px;

left: 50%;

margin-left:-375px;

top: 50%;

               margin-top:-213px;

z-index: 750;

}

.modal{

background-color: white;

border: solid 8px #666;

               position: relative;

z-index: 1000;

width: 750px;

height: 450px;

padding: 0px;

}

Or something to that affect

# February 5, 2008 12:27 PM

Luke Breuer said:

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

luke.breuer.com/.../javascript-modal-dialog.aspx

# February 6, 2008 1:53 AM

Brad said:

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.

# February 6, 2008 3:29 AM

Mindaugas said:

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)

{

 hideModal('modalPage');

}

# March 21, 2008 3:46 AM

Mudassar Khan said:

Thanks man works great in ie7

# July 1, 2008 11:55 PM

Ashok said:

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

# July 7, 2008 3:03 AM

Dave said:

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,

Dave

# September 21, 2008 4:21 PM

Jack said:

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?

# November 3, 2008 4:37 PM

Recai said:

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.

# November 11, 2008 10:43 AM

kashwmu said:

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.

Thanks

# December 16, 2008 4:29 PM

Rameswar Datt Kamakolanu said:

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

# January 6, 2009 12:28 AM

norf182 said:

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

# February 19, 2009 2:15 PM

king said:

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

# May 11, 2009 8:55 AM

abhilashca said:

There is an error in the script. I dont know how that occured, while posting.

---

<a href="BLOCKED SCRIPThideModal('modalPage')">[X]</a>

---

have to be replaced with

<a href="#" onclick="hideModal('modalPage')">[X]</a>

BTW, i like the code.

thanks a lot.

tc

# May 14, 2009 5:13 AM

Monique said:

Thanks abhilashca re: the a href tip.

# May 15, 2009 7:21 AM

Quinton said:

This is a fantastic bit of code.

I am using it as a simple "Are you sure you want to XXX?" modal solution, instead of using a horrible looking javascript confirm.

Thank you for the effort of writing this up.

# June 9, 2009 3:17 AM

Jan said:

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?

# July 25, 2009 9:52 PM

Assad said:

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

Thanks Alot.

# August 19, 2009 12:12 PM

luis said:

awsome very simple, most ppl out there putting complicated stuff

# December 6, 2009 2:01 AM

Dan said:

Thanks for the bit of code.

consider using if you wish

<div class="modalTop"><a href="javascript:hideModal('modalPage');">[X]</a></div>

it worked in ie8 in compatibility mode

# February 2, 2010 2:35 PM

Akmal said:

its really usefull but not working in IE6

thanks anybody can solve

# February 9, 2010 7:16 AM

Daniel said:

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

# May 20, 2010 3:26 PM

Luke said:

For what year?

# August 11, 2010 3:00 PM

brentmags said:

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

kiwiguydownunder

# September 6, 2010 12:05 AM

AnthonyV said:

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

IE 6 is irrelevant by the way.  ;)

# October 28, 2010 3:29 PM

Jeff said:

Well the post is four years old...

# October 28, 2010 3:59 PM

Nav said:

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

# November 11, 2010 5:12 AM

tanner said:

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

# December 19, 2010 10:25 PM

narenderrawal007 said:

Asp.net 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

# December 29, 2010 10:21 AM

ahsanm.m said:

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

# January 25, 2011 4:54 AM

Cissi said:

Great post, thanks!

# January 28, 2011 8:57 AM

Ghouse said:

Works like a charm!!

# February 16, 2011 2:18 AM

Tony said:

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

# May 16, 2011 4:53 PM

Mark Graham said:

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?

# July 22, 2011 4:32 AM

Rony Anderson said:

very good, simple and fast!

thank's a lot!

# August 25, 2011 2:05 PM

Anonymous said:

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!!!

# February 2, 2012 11:05 PM

Andre said:

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

# July 9, 2012 1:18 AM

Jeff said:

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

# July 9, 2012 10:42 AM

Mark A. Rupert said:

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?

# September 5, 2012 11:15 PM

Mark A. Rupert said:

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

# September 5, 2012 11:25 PM
Leave a Comment

(required) 

(required) 

(optional)

(required)