如何在显示弹出窗口时使浏览器变暗

Question

我经常会遇到通过弹出原始页面前面的窗口来响应点击“这是什么”或“图库”链接的网站，并使原始页面变暗。

这是一个奇特的AJAX技巧吗？

是否只在某些浏览器中支持？

最重要的是，它是如何完成的？

Answer 1

这只不过是添加覆盖整个屏幕的<DIV>，并为其提供黑色背景。 jQuery的UI库将自动为您处理。

http://jqueryui.com/demos/dialog/#modal

或者你可以用这样的基本HTML / CSS / jQuery来实现：

div.modal-bg { 
  background:#000; 
  position:fixed; 
  top:0; left:0; 
  width:100%; 
  height:100%;
  z-index:10; 
}

<div class="modal-bg"></div>

$(function(){
  $("div.modal-bg").fadeTo("slow", .5);
});