ライトボックスを適用してdivを開く方法は？

2012-01-09 Nadeem

どのライトボックスプラグインをお使いですか？ –

また、これは「成功」のようなものですか？一種のdiv？ –

私は、いくつかの画像とテキストを持っているdivを持っていると私はユーザーがそれをクリックするとdivを開くが、CSSを使用していないJavaスクリプトを使用してボタンを持っています – Nadeem

はのは、CSS

.black_overlay{ 
display: none; 
position: absolute; 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 
background-color: black; 
z-index:1001; 
-moz-opacity: 0.8; 
opacity:.80; 
filter: alpha(opacity=80); 

} 


.white_content { 
display: none; 
position: absolute; 
top: 25%; 
left: 25%; 
width: 50%; 
height: 50%; 
padding: 16px; 
border: 16px solid orange; 
background-color: white; 
z-index:1002; 
overflow: auto; 

}

black_overlayクラスから始めましょう、私はdiv要素を持っていると私は送信ボタンをクリックした後、ライトボックスでそれを表示するには、Webページが見えるようになる層であり、フェードする。これは、ウェブページをオーバーレイするブラウザ（z-インデックスを見る）と現時点では表示されていない（ディスプレイを見る）ように、黒色の80％の不透明な背景です。

白いコンテンツクラスは、写真/ログイン画面/ライトボックスオーバーレイに表示したいものがあるレイヤーです。これは、black_overlayレイヤーの上に置かれる白いレイヤーです（black_overlayレイヤーより大きいz-indexを見てください）。オーバーフローにより、スクロール可能なコンテンツを作成できます。で、例えば

document.getElementById('light').style.display='block';document.getElementById('fade').display='block';

：HTMLファイル内

は、あなたがライトボックスを開いて、このコードを挿入するアクションをtrigの、

<div id="light" class="white_content">Hi, I am an happy lightbox</div><div id="fade" class="black_overlay"></div>

今だけタグの前にこのラインを置きますリンクは次のようになります。

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Hide me</a>

完全な例ページは

かもしれません

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <title>LIGHTBOX EXAMPLE</title> 
    <style> 
    .black_overlay{ 
     display: none; 
     position: absolute; 
     top: 0%; 
     left: 0%; 
     width: 100%; 
     height: 100%; 
     background-color: black; 
     z-index:1001; 
     -moz-opacity: 0.8; 
     opacity:.80; 
     filter: alpha(opacity=80); 
    } 
    .white_content { 
     display: none; 
     position: absolute; 
     top: 25%; 
     left: 25%; 
     width: 50%; 
     height: 50%; 
     padding: 16px; 
     border: 16px solid orange; 
     background-color: white; 
     z-index:1002; 
     overflow: auto; 
    } 
</style> 
</head> 
<body> 
    <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p> 
    <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> 
    <div id="fade" class="black_overlay"></div> 
</body> 
</html>

出典

2012-01-09 05:27:26

オリジナルソース：http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/ – Ziggy

素晴らしい仕事.... – Sunny

ライトボックスを適用してdivを開く方法は？

答えて

関連する問題