jquery - 使用 jQuery 编写模态弹出窗口

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 技术。