Best option for modal screens in ASP.NET

Question

I'm looking for the best way to implement a modal popup in ASP.NET of another ASP.NET page. I'm coding for Firefox 2.x+ and can use JQuery, but I'm not very familiar with it.

I see a lot of solutions that use "AJAX", but I'm not sure in what context, so I haven't gone down that route.

Answer 1

I'm using the jQuery UI Dialog plugin. Works very well. Documentation for the plugin can be found at http://docs.jquery.com/UI.

Answer 2

i've used AjaxControlToolkit but jQuery option suggested by @tvanfosson seems a lot nicer

Answer 3

You could use radWindow from Telerik, the jQuery UI Dialog plugin like tvanfosson recommended or you could take a look at

http://vision-media.ca/resources/jquery/jquery-popup-plugin-review which review some jQuery plugins for popups.

Having only expericence with radWindow, I can tell you that with radWindow, you might have to use some hacks and quirks to make it work properly, but the result is good if you put enough time into it.

Answer 4

I have used both the ajax modal extender as well as the jQuery jqModal, both have worked pretty well. At the end of the day, this decision should come down to what the rest of the code is like, what your comfort is with each, etc.

If I were to pick an option today, I would probably pick the jqModal or simple modal for jQuery. I'm pretty comfortable with these now.

• jqModal
• SimpleModal

Answer 5

For simple modal displays, I've found BlockUI to be a great solution.

For example, here's a post about using BlockUI as a modal progress indicator, and here's one about using BlockUI to display a modal confirmation dialog.

If you need something more complex, I'd second the jQueryUI Dialog.

Answer 6

I make my own, using DOM methods. I've found it to be a lot simpler than adapting any of these plugins to our CSS.

A modal is simply an absolutely positioned window with a background. We make ours using a larger transparent container with floated contents.

I use a function that returns some html with the floated contents. The class used for the modal box should be absolutely positioned with a high z layer.

function create_modal(doc_id,css_class,append_to)
{
if(typeof append_to==='undefined'){append_to='content';}
var container=document.getElementById(append_to);
if(!container){return false;}
var modal_box=document.createElement('div');
container.appendChild(modal_box);
modal_box.id=doc_id;
modal_box.className=css_class;
return modal_box;
}

var modal_window=create_modal('modal_id','a_css_class');
if(!modal_window){return false;}
modal_window.innerHTML=function_or_var_providing_html();

so, it's all nice and simple without some 10 or 15 k plugin!