Question

我使用VS2010，C＃来开发ASP.NET网络应用程序，最近我看到一些网站显示一个小窗口（它以某种方式模态）显示在屏幕上，而它显示整个屏幕是以某种方式变暗（比如有一个灰色的alpha图层），这样用户就无法在主屏幕上做任何事情，只能在小窗口上进行对焦。

可以在这里找到一个例子：

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

您可以点击图片查看窗口。我听说这种技术也在facebook中使用

我怎样才能达到这个效果？我认为这是javascript，对吧？我可以在VS中使用工具箱设计这个小窗口吗？如何显示它并禁用其他元素？如何在屏幕上渲染alpha图层？有没有提示或样品？

我正在寻找跨浏览器的解决方案

Answer 1

你有很多脚本来实现这个视图，这个是推荐的，非常轻。

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

Answer 2

您可以使用AjaxControlToolkit轻松实现您想要的弹出窗口。这是一个显示如何操作的链接：http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

Answer 3

这是通过javascript完成的 - 生成了一些动态HTML（div，其高度和宽度均为100％，为灰色且具有一些不透明度设置。）

查看jQuery UI和FancyBox插件。

FancyBox是一种用于在Mac风格的“灯箱”中显示图像，html内容和多媒体的工具，它漂浮在网页的上方。

Answer 4

你所描述的有许多名称（灯箱，模态对话框，叠加层），但一般的概念是在一个部分的顶部绘制一个半透明层，并显示一个对话框或一个图像，或其他任何东西，除此之外。

您可以自己创建相同的效果。以下是使用jQuery开始的示例代码：

(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);

在浏览器上显示小模态窗口

4 个答案: