display small modal window on browsers

Question

I use VS2010,C# to develop ASP.NET web app, recently I've seen some sites that display a small window (it is somehow modal) displaying on top of screen, and while it is displayed the whole screen is somehow dimmed (like having a gray alpha layer), so that user can do nothing on the main screen and focus is only on the small window.

An example can be found here:

http://www.geda.de/Permanentanlagen/Industrieaufzuege/Materialaufzuege ,

you can click on images to see the window. I've heard that this technique is used in facebook also

how can I achieve this effect? I think it is javascript, right? can I design this small window in VS and using toolbox? how can I display it and disable other elements? how to render an alpha layer on top of screen? is there any tips or samples?

I'm searching for a cross-browser solution

Answer 1

You have a lot of scripts to achieve this view , this one is recommended and very light .

http://www.zurb.com/playground/reveal-modal-plugin

Answer 2

You can use the AjaxControlToolkit to implement the popup you want very easily. Here's a link that shows how to do it: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

Answer 3

This is done with javascript - some dynamic HTML is generated (a div with 100% height and width which is grey and has some opacity settings).

Take a look a jQuery UI and the FancyBox plugin.

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.

Answer 4

What you described has many names (light-box, modal-dialog, overlay), but the general concept, is to draw a semi-transparent layer on top of a section, and to show a dialog, or an image, or anything else, on top of that.

You can create the same effect yourself. Here is a sample code using jQuery to start with:

(function ($) {
    $.fn.showDialog = function (options) {
        var defaults = { element: "<div></div>", width: "", height: "" };
        options = $.extend(defaults, options);
        var element = this;
        var opacityLayer = $("body > div#dialog-container > div#opacity-layer");
        if (opacityLayer = 'undefined') {
            opacityLayer = $("<div id='dialog-container'><div id='opacity-layer'></div></div>").appendTo("body").find(' > #opacity-layer');
        }
        opacityLayer.addClass('opacity-layer');
        opacityLayer.animate({ 'opacity': '0.7' }, "fast", function () {
            if (!element.addClass) {
                element = $(element);
            }
            element.addClass('dialog rounded-cornered');
            //opacityLayer.html(element);
            opacityLayer.after(element);
            //opacityLayer.append("<div class='actions'><a id='close-dialog' class='action dialog-action' href='javascript:void(0);'>بازگشت</a></div>");
            element.append("<span id='close-dialog'></span>");
            element.find('#close-dialog').click(function () {
                hideDialog();
            });
        });
        return this;
    }
})(jQuery);