Question

我试图了解模态窗口的工作原理。我知道，那里有多个插件，但我想写自己的插件 - 一个简单的插件。

- 当在页面上单击某个元素时，我可以添加一个jquery函数来show（）隐藏图层。

- 我可以将它加载到页面内容之上但调整CSS，但我仍然不确定如何做几件事。

例如，如何让页面的其余部分在窗口下方淡出？

感谢。

Answer 1

您必须在模态内容和页面的其余部分之间使用另一个图层。这通常称为叠加层。覆盖层为黑色或白色（通常），略微不透明。

为了获得最佳结果集

body, html      { width: 100%; height: 100% }

这样叠加层不会受到body / html大小的限制。

div.overlay     { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 12000 }

然后附加叠加层：

var overlay = $('<div />').css({opacity: '.8' }).addClass('overlay');
$('body').append(overlay);

如果您开始遇到问题，那么在旧版浏览器（如IE 6）中，在z-index控制元素之上显示下拉列表。为此，您必须在内容下使用隐藏的iframe技术。

Answer 2

以jQuery's dialog为例。它使用div元素，其中设置了明确的宽度和高度（通过Javascript动态计算），并且绝对位于左上角。为了获得褪色效果，设置了具有不透明度的背景图像（对于IE，也应用filter: alpha(opacity = 50);）。

标记：

<div class="ui-widget-overlay" style="width: 1263px; height: 1274px; z-index: 1003;"></div>

CSS：

.ui-widget-overlay 
{
    background-image: url('path/to/dark-image.png');
    opacity: 0.5;
    left: 0;
    position: absolute;
    top: 0;
}