[英]display small modal window on browsers
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. 我使用VS2010,C#开发ASP.NET Web应用程序,最近我看到一些站点在屏幕顶部显示一个显示小窗口(以某种方式是模态)的窗口,而在显示整个窗口时却以某种方式变暗(例如具有灰色的Alpha图层),以便用户在主屏幕上无法执行任何操作,而焦点只能放在小窗口上。
An example can be found here: 可以在此处找到示例:
http://www.geda.de/Permanentanlagen/Industrieaufzuege/Materialaufzuege , 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 我听说Facebook也使用了这种技术
how can I achieve this effect? 我怎样才能达到这种效果? I think it is javascript, right? 我认为这是JavaScript,对不对? can I design this small window in VS and using toolbox? 我可以在VS中使用工具箱设计这个小窗口吗? how can I display it and disable other elements? 如何显示它并禁用其他元素? how to render an alpha layer on top of screen? 如何在屏幕顶部渲染Alpha层? is there any tips or samples? 有提示或样品吗?
I'm searching for a cross-browser solution 我正在寻找跨浏览器的解决方案
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 http://www.zurb.com/playground/reveal-modal-plugin
You can use the AjaxControlToolkit to implement the popup you want very easily. 您可以使用AjaxControlToolkit轻松实现所需的弹出窗口。 Here's a link that shows how to do it: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx 这是显示操作方法的链接: http : //www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx
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). 这是通过javascript完成的-生成了一些动态HTML(高度和宽度为100%的div
,其为灰色,并具有一些不透明度设置)。
Take a look a jQuery UI and the FancyBox plugin. 看一下jQuery UI和FancyBox插件。
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. FancyBox是用于在Mac样式的“灯箱”中显示图像,html内容和多媒体的工具,该工具漂浮在网页的顶部。
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: 这是使用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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.