Best option for modal screens in ASP.NET - asp.net

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.

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

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

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.

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

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.

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!

Related

Telerik UI for ASP.NET AJAX window

I want to develop a web app where login form will appear in a RadWindow, which will slide from top and on close will go to top again. I have read many resouces but it's Animation property doesn't work like this. Do you have any experience with. What should I do? Please answer with some online example too. Thanks
Indeed, they do not work like that. So, it would be easiest if you animate the control's popup element yourself.
You can start with the FlyIn animation (it may be suitable for you, so you may not need to animate the appearance)
Then, you can use the OnClientBeforeClose event to animate the popup away yourself (there are many libraries that can do this for you and you can even use CSS animations), then hide it.
A similar approach is shown here http://www.telerik.com/support/kb/aspnet-ajax/window/details/close-radwindow-with-resize-animation-instead-of-fade

popups in asp.net

i want to display the pop ups in asp.net page like how the stack over flow show the pop ups on the top of the site (you get the new answer for the question like that in a orange color) how can i write the code is there any free source code or any reference. thank you
Given below are the steps to achieve what you want.
Have a div (a container) to show your updates
Create a window.setTimeout to execute a JS function (AJAX)
In that function check for updates from server
Finally if there are any updates then show it in the div container
When there are updates then again setTimeout to make it invisible over a period of time (say 3 secs)
To achieve this in a very easy fashion use JS libraries like JQuery.
HTH
Thats not a 'popup', its probably just a standard DIV that has its height and content changed dynamically. You can do a "view source" on the page to locate the item, or use firebug (easier).
After looking, its a div called 'notify-container'.
These days, all that wizzery is generally done with jQuery
The asp.net ajax control toolkit has that. Check it out here.
I think you'll find that's done using a holding container at the top of the page, a timer to periodically query an AJAX enabled method for updates which replaces the content of the container based on the response.

Removing Warning Image

How to remove The warning image of the alert box in Javascript. I want to delete the warning image from the javascript alert window. Is it Possible?
Unfortunately, the look-and-feel of the result of an alert() call is browser dependent. Each browser implements it differently.
If you need to change the look of a browser dialog box, you'll have to implement your own. There's a lot of options out there. JQuery UI is a particularly popular one if you happen to be using JQuery.
You won't be able to change it. Better use a custom alert box.
jQuery Impromptu
is a nice one with a lot of options

Resizable Gridview columns using javascript

I want to Resize Gridview columns using javascript. Below is an example.
I think this plugin does what you requested http://www.ita.es/jquery/jquery.grid.columnsizing.htm
Though I would suggest checking out this customizable jQuery based grid aswell http://www.trirand.com/blog/
I would recommend using jQuery if you want to do this yourself. You can grab the click event of the header row (or wherever you want), and then you can use the x/y of the mouse to drag a line. Once the mouse is released, you can troll through the table and reset the width of the 's.
Otherwise, there are several JavaScript table controls on the internet that you could use.
You can try open-source project ASP.NET CoolGridView control. It works well with IE 6/7/8, Firefox 3.0 / 3.5, Safari and Chrome. Supports resizable columns and fixed headers.
http://johnsobrepena.blogspot.com/2010/02/coolgridview-february-2010-release.html
The example you are refering to is using ExtJS it looks like. There's also jqGrid (an extension to jQueryUI), and others. If you are looking for an ASP.Net Ajax grid control there are several options from many different component vendors (Component One, Infragistics, DevXPress etc).
I'm only presuming here that you want a server-oriented Grid component because of the term "GridView" in the question. I would suggest searching for: "ASP.Net Ajax" grid control. This will give you results that may best suit your needs.

Modal Pop-up Image Viewer for Asp.net

I am looking for a control which can show me selected image detail view which is actually gonna be bigger image in a modal pop up to show a better view of image to my customers. You know those standard modal pop-up resizeable to selected image original size. Dynamicly resizable modal pop-up is actually what I am looking for and of course it should be for Asp.net (if possible for 3.5)
I've searching for a while but I haven't been able to come up with a acceptable solution yet.
Thanks in advance.
Although not asp.net, but rather javascript based, Lightbox is the granddaddy of displaying a popup with a larger image. http://www.lokeshdhakar.com/projects/lightbox2/
There are many other similar open-source client-side 'controls' that would do what you want.
You may also need to roll your own from jQuery of YUI to build the resizeable requirement that you want.
You might want to have a look at Telerik:
http://www.telerik.com/products/aspnet-ajax.aspx
The have some controls that would probably get the job done.
Otherwise search for Infragistics, they have similar controls.

Resources