Saving a jQuery event handler for later use

Quick note: If you need to save an event handler so you can unbind the event and rebind it later, the code below will do the trick. This is especially helpful if you’re using a jQuery plugin that attaches events to your element, but you want to temporarily unbind it.

var submit = $("#submit");
//Save original click event handler for later
var click = submit.data("events")["click"][0].handler;
//Unbind click event
submit.unbind("click");
//Bind click to original event
submit.click(function (e) {
	$.proxy(click, submit)(e);
});

Modal windows on the web

I’ve been in web development for a while now and one thing I do notice is that web sites are headed towards a desktop user experience. One of the key UI elements is the modal window. You know, the that little window that won’t let you do anything until you respond to it. I’ve been having to use it in our web projects more and more. Usually, this effect is comprised of CSS and Javascript. Up till recently, I’ve only had a change to fumble my way trying to get all the pieces together for the correct effect. Then I would run out of time and end up using the ASP.Net AJAX modal control or another RAD control. I usually don’t have a problem with these controls but sometimes, I just want something lightweight with just enough functionality to do what I need.

The other day I stumbled upon Jeff’s blog about the modal window.
It was almost everything I needed.

My modal windows is:


<div id="modalPage">
<div class="modalBackground">
</div>
<div class="modalContainer">
<div class="modal">
</div>
</div>
</div>

My styles are:


.modalPage
{
display: none;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position:fixed;

}
.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: 600px;
left: 50%;
top: 50%;
z-index: 750;

}
.modal
{
background-color: white;
position: relative;
top: -150px;
left: -300px;
z-index: 1000;
width: 600px;
height: 300px;
padding: 0px;
}

And my javascript is

function revealModal(divID)
{
document.getElementById(divID).style.display = "block";
}

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

The only thing that didn’t work for me from Jeff’s code was in the hideModal function. He had two extra lines to ensure the transparent overlay background moved with the window if the user scrolled the page. For me, the gray background remained static and if you were to scroll down, the rest of the page was not covered and could still receive interaction from the mouse. Jeff’s script might not have worked for me because I am running IE 8 Beta 2…although I was in IE 7 compatibility mode. Anyways, the fix for me was pretty simple and it lies in the #modalPage style. All I did was set the position to fixed. That did the trick!

Be warned, the current project I’m working on is an intranet site that will only be viewed on IE so I haven’t tested this fix with FireFox, Safari, or Opera.

HAPPY HALLOWEEN!