OK、だから私はこのスニペット http://jsfiddle.net/8vFEd/を ここに持っています;
ポップアップが表示されるたびに、背景を無効にして、ユーザーが最初のポップアップを閉じるまで別の言語をクリックできないようにするか、ユーザーが2番目の言語をクリックするたびに最初のポップアップが消えて、対応するポップアップが表示されます。
OK、だから私はこのスニペット http://jsfiddle.net/8vFEd/を ここに持っています;
ポップアップが表示されるたびに、背景を無効にして、ユーザーが最初のポップアップを閉じるまで別の言語をクリックできないようにするか、ユーザーが2番目の言語をクリックするたびに最初のポップアップが消えて、対応するポップアップが表示されます。
私の提案は、ページの残りの部分へのクリックスルーを「キャッチ」する背景の上にオーバーレイを配置することです。<div class='lang'>
追加呼び出しの前に、$('。propa')。click()関数に以下を追加します。
$("body").append('<div class="modalOverlay">');
そしてこれをあなたのCSSに:
.modalOverlay {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0,0,0,0.3); /* black semi-transparent */
}
次に、「閉じる」クリックを処理するためのコードで、この.modalOverlayをDOMから削除します。ポップアップウィンドウの前にオーバーレイを追加して、ウィンドウの後ろに配置することを忘れないでください(または、オーバーレイcssに「z-index:5」を追加し、ポップアップcssに「z-index:6」を追加します)。
.lang
また、 cssルールを相対的position: absolute;
または相対的ではなく変更することをお勧めしますfixed
。
オンクリックの開始時にこれを追加します
$(".lang").remove();
これにより、DOMを新しいもので再描画する前に、langクラスでdivを削除またはクリアします。