One UI element that has always been tricky to create in ASP.NET
applications is the Modal Window. Often, applications will
present an entire page for simple property editing, in
situations where a modal window is a more elegant, and straight-forward
UI element. This is probably due mainly to the fact that there
are no intrinsic browser controls that work well for this, and are easy
to deal with on the server side.
SDDs Are So Last Year
A while back, I proposed a solution for creating Modal Windows, which I called Sticky Draggable Divs (SDDs)
If you do Web Application development, you've no doubt struggled
with the task of creating Modal forms. You have different options
for doing this, each with their own advantages and pitfalls.
Hosting your form in a new browser instance (window.open()) is
really a kludge, and many users have popup blocking software which
will break this approach. Using true Modal dialogs
(window.showModalDialog()) doesn't work well from within ASP.NET. Using
draggable DIV elements solves some of these issues, but has its own set
of problems. Dragging DIV elements involves using DHTML and JavaScript
and the script that you have to write to enable this can be tricky.
Toss browsers other than IE into the mix, and you've got even more
problems.
A big problem with this approach was that it relied on DHTML Behaviors which is
IE only and can cause problems with browsers running with a high
security level. After living with this solution for over a year,
and it’s drawbacks, I finally looked for a better way.
A Better Solution
I’ve come up with a new solution which uses standard ASP.NET Controls, DHTML and cross-browser JavaScript. ModalPanel
is implemented as a sub-classed ASP.NET Panel control. Since
it’s a Panel, it can be programmed in a way you’re probably already
familiar with if you do ASP.NET development.
This control adds a Title Bar, and optional close
button to the Panel. When the user drags the title bar, the
entire panel is dragged. It also uses cookies to remember it’s
position on postbacks and return visits to the page.
You can experiment with it here at my demos site.
Implementation
Step 1: Reference my Tompkins.Web dll in your project.
Download the source code here, the DLL here, or an entire example project here. Add a project reference to the DLL and optionally add the control to your toolbar in Visual Studio.
You’ll then want to create an instance of the control on your page of course.
<cc1:modalpanel id="ModalPanel1" title="Your Title Here" runat="server"></cc1:modalpanel>
Step 2: Add the CSS styles and images to your project.
See the style.css, toolbar_close.gif and window_titlebg.gif files in either download for examples.
Step 3: Set Properties
There are some properties that you can set, such as
the window’s title, and you can also alter the CSS classes used to
style the thing.
Step 4: Handle the WindowClosed Event, and show/hide the control.
The only event to concern yourself with is the WindowClosed event.
public event EventHandler WindowClosed;
All your application must do is handle this event, and show/hide the control as you would with any other ASP.NET Panel…
private void ModalPanel1_WindowClosed(object sender, System.EventArgs e)
{
this.ModalPanel1.Visible = false;
}
You’re also going to want to add some code to show the panel in the first place, like so.
private void ButtonPlus1_Click(object sender, System.EventArgs e)
{
this.ModalPanel1.Visible = true;
}
That’s it! If your have trouble getting it to drag properly,
or if it looks all funky, make sure you have your CSS stylesheet
referenced properly, and that you have the CSS classes defined as I
show in my example.
-Brendan