用透明窗口覆盖文档

Question

我想对我的文档做些什么，这是非常独特的（以前没有见过），因此可能甚至不可能。

我想要的是将div覆盖文档中的所有内容，也许会将其设置为背景黑色，以便看不到任何内容。第二，我希望在覆盖层中有一个小的乡绅窗口，它不会共享黑色背景，事实上它有点透明，因此可以通过该窗口“窥视”来查看文档内容。但只有这个窗口的内容。这将有点像那些仅缩放一小部分的“缩放”插件，但在这种情况下，它会显示特定的内容。任何想法如何创造这样的事情？

Answer 1

的你可以做的是下面的一个例子（它可能不是最好的，但它的工作原理）

HTML

<div id='peakview'></div> <!-- This div is your view window --> 
<div id='out'> 
    <div class='overlay'></div> 
    <div class='overlay'></div> 
    <div class='overlay'></div> 
    <div class='overlay'></div> 
</div> 

的<div>内的#out将重新大小相应地#peakview的位置创造了一个完整覆盖的幻觉。这可以通过简单的css和一些微积分来完成。

主要是你需要的是元素在屏幕上的位置。

var h = $(this).offset().top; 
var l = $(this).offset().left; 
var r = ($(window).width() - ($(this).offset().left + $(this).outerWidth())); 
//right offset 
var b = ($(window).height() - ($(this).offset().top + $(this).outerWidth())); 
//bottom offset 

在我的例子我用.draggable()从jQuery UI四处移动DIV。同时拖动上面显示的4 div正在调整它们的高度和宽度以填满#peakview和document border之间的空格。

的第一个div

$('.overlay:eq(0)').css({ 
    top: 0, 
    left: 0, 
    width: '100%', 
    height: h //the height is always changing depending on the #peakview .offset().top 
}); 

In this fiddle you will see how the filling divs behave

Answer 2

另一个围脖开始：

http://jsfiddle.net/XDrSA/

这需要一些额外的工作，但它可能会满足您的需求。

HTML：

<div id="yourContent" style="width: 300px; margin:100px auto;"> 
    <input type="button" id="zoom" value="Click to zoom"/> 
</div> 

<div id="zoomer"> 
    <div id="window">This is your "window"</div> 
    <div id="overlay_top"></div> 
    <div id="overlay_left"></div> 
    <div id="overlay_right"></div> 
    <div id="overlay_bottom"></div> 
</div> 

CSS：

body { 
    margin:0; 
    padding:0; 
} 

#zoomer { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    display: none; 
} 
#overlay_top { 
    height: 20%; 
    width: 100%; 
    background-color: black;  
    position: absolute; 
    top: 0 
} 

#overlay_right { 
    height: 100%; 
    width: 20%; 
    background-color: black;  
    position: absolute; 
    right: 0; 
} 

#overlay_left { 
    height: 100%; 
    width: 20%; 
    background-color: black;  
    position: absolute; 
    left: 0; 
} 

#overlay_bottom { 
    height: 20%; 
    width: 100%; 
    background-color: black;  
    position: absolute; 
    bottom: 0; 
} 

#window { 
    margin: 0 auto; 
    height: 100%; 
    width: 80%; 
    position: absolute; 
    background-color: rgba(0,0,0,.5); 
} 

和一块JavaScript代码：

$('#zoom').click(function() { 
    $('#zoomer').fadeIn(); 
}); 

您可能需要与定位绊倒，窗口将是一个固定大小一个。虽然不可拖动。