div以外のすべてのフェード/ブラーを作成する

Question

ライトボックスを使用した場合と同じ効果を得たいと考えています。

私が欲しいのは、画像をクリックすると、画面の中央にある画像のほかに、すべてがぼやけて見えます。

JSで終わったらjQueryで例を挙げてください。

デモ：http://www.huddletogether.com/projects/lightbox2/ （画像をクリックしてください）。

Answer 1

ネヴァーマインド、おかげでチームメイトが、私は、私は単にサイトのDIV〜0.5をフェードインし、その後、私は、メインの側面を出したかったdivにフェードイン短いスクリプトを書いた:)自分で

をそれを行うために管理していますDIV、それは動作します！今私がやり残してきたすべてが、この混乱いくつかのマイナーなものと整頓を仕上げることです

<script type="text/javascript"> 
$('#messagesLink').click(function() { 
    $('#wrapper').fadeTo('slow', 0.5, function(){ 
     $('#messageBox').fadeIn(); 
    }); 
}); 

$('#exitLink').click(function() { 
    $('#messageBox').fadeOut(function(){ 
     $('#wrapper').fadeTo('slow', 1); 
    }); 
}); 
</script> 
<div id="messageBox" style="display: none; width: 300px; height: 300px; position: absolute; top: 50px; left: 50%; margin-left: -150px; background-color: white; text-align: center; z-index: 9999"> 
    This is a text box! <a href="javascript:void(0);" id="exitLink">Click here to close!</a>. 
</div> 
<div id="wrapper" class="adminMainWrapper" style="z-index: -1"> 
    You have <a href="javascript:void(0);" id="messagesLink">5 new messages</a> 
</div> 

:) あなたの助けをありがとうございました：

は、以下のコードを参照してください！ :)

Answer 2

ここには、あなたがしたいことを行うworking jsFiddleがあります。それは、ドキュメント全体のクリックを聞きながら、ハッキーです。

これは、選択した画像に対して2つの別々のz-index値と.highlightedクラスを使用することで機能します。オーバーレイは本体よりも高い値のz-indexが必要ですが、選択した画像はとなります。の値はz-indexである必要があります。画像はすべてposition: relativeに設定する必要があります。

これは、ドキュメントのクリックをリッスンし、ターゲットがイメージかどうかを確認することで実現できます。そうであれば、すべての.highlightedクラスを削除し、存在しない場合はオーバーレイを追加し、存在しない場合はオーバーレイを削除します。その後、.highlightedクラスをターゲットに追加します。ターゲットがドキュメントの他の部分であれば、オーバーレイが削除されます。

Answer 3

ページの残りの部分をぼかすことはできません。これをやりなおす方法は次のとおりです：

少し前、私はHTML - > Canvas rendererで作業を始めました。それはここにあります： https://github.com/cwolves/CanvasRenderer。これにより、既存のページ構造がHTML5キャンバス（またはFlashCanvasのIE < 9）にレンダリングされます。レポをフォークし、すべてのバグを修正してください。

ページをキャンバスにレンダリングしたら、http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.htmlを使用してぼかします。このキャンバスをページ全体に配置し、ライトボックスを表示します。

Answer 4

これらの変更は、createElement（）およびappendChild（）を使用して作成された新しいimg要素にJavaScriptのsetAttribute（）を使用して行います。

CSS

body { 
background-color:black; 
color:white; 
} 
#upp { 
position: fixed; 
top: 100; 
left: 100; 
width: 70; 
height:50; 
color:black; 
background-color: white; 
opacity:1; 
z-index:1; 
} 
#cover { 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height:100%; 
background-color: white; 
opacity:0.7; 
} 

HTML

<p>this is below. :P</p> 
<div id="cover"></div> 
<div id="upp"><p>this should be up. way up that the previous one.</p></div> 

img要素とp要素を交換し、それに応じて変更を行います。