ライトボックスを消し、背景をクリックして消してください。

Question

こんにちは！私はライトボックスを作ろうとしていますし、働くことがすべてあります。あなたはclick here to see it in live modeです。私が今やりたいことは、バックグラウンドをクリックすることができ、ボックスが消えることです。また、 "ÅpneLysbildefremvisningen"をクリックするとライトボックスとバックグラウンドがうまく消えてしまいます。バックグラウンドをクリックして閉じると、フェードバックします。私はそれをする方法を理解できませんでした。ありがとうございました！

Index.htmlと

<h1><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Start lysbildevisningen</a></h1> 

のstyle.css

.black_overlay { 
display: none; 
position: absolute; 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 
background-color: black; 
z-index:1001; 
-moz-opacity: 0.1; 
opacity:.10; 
filter: alpha(opacity=10); 
} 
.white_content { 
    display: none; 
    position: absolute; 
    top: 30%; 
    left: 30%; 
    width: 640px; 
    padding: 10px; 
    background-color: #FFF; 
    z-index:1002; 
    overflow: auto; 
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
} 

Answer 1

あなたはblack_overlayクラスを持つdiv要素のクリックイベントに耳を傾ける必要があります。そしてその中で、メインディビジョンのstyle.displayを変更してください。

クライアントフレームワークをjQuery ow extJSとして使用したことがありますか？彼らはこの種の作業を楽にしてくれますし、それらのフレームワークに基づくいくつかのプラグインはすべてあなたのために働きます。最初からすべてのコードを書くことは、あなたが本当にJavaScriptの基礎を学ぶことに興味があるときにだけ良いオプションです。