[jQuery]レイヤードポップアップ(modal window) 浮かべる時全体を覆う半透明かけることは幕(black mask) 作り

常に知りたかった. modal boxを浮かべる方法は知りたいでしょうなかった. 裏をだ覆うかけることは半透明阻むどうに作るかどうかが知りたかった.

答は簡単だった. jQuery modal windowを作るチュートリアルで彼方法を見つけた. 私たちがして来た方式して大きく違うのなかった. これだけ持ってプラグインを作って見ようかする考えも入った.

定木, 半透明かけることは阻む作る方法は簡単だ.(例題から見るのをバラなら下のファイルを使えばなる.)

一応, HTML義どこかに下のコードを挟んで入れる. どこでも星上官ないが探し楽な所に置くと割ことだ.

<div id="mask"></div>

次は CSSのに下のように日与える.

#mask {  
  position:absolute;  
  left:0;
  top:0;
  z-index:9000;  
  background-color:#000;  
  display:none;  
}

最後に jQuery コードを組んで見よう.

function wrapWindowByMask(){
        //画面の 高さと 幅を 求める.
        var maskHeight = $(document).height();  
        var maskWidth = $(window).width();  

        //マスクの 高さと 幅を 画面 ので 作って 全体 画面を 満たす.
        $('#mask').css({'width':maskWidth,'height':maskHeight});  

        //アニメーション 效果
        $('#mask').fadeIn(1000);      
        $('#mask').fadeTo("slow",0.8);    
}

定木, 上関数を使えば半透明のかけることはマスクが現われるのだ. それではどうに閉めようか?

二行かあるのだ.

1.mordal window義閉じるボタンを押した時

2.半透明かけることは阻む押した時

二場合皆を支援することため click割時起きるイベントを二箇所かけなくちゃいけない.

これは原本でそのまま掻いて来たコードだ. .window増えたかけることは幕上に浮かんだ mordal windowだ.

//閉じる ボタンを 押した 時
$('.window .close').click(function (e) {  
    //リンク 基本動作は 作動するの ないように する.
    e.preventDefault();  
    $('#mask, .window').hide();  
});       

//かけることは 阻む 押した 時
$('#mask').click(function () {  
    $(this).hide();  
    $('.window').hide();  
});

上コードたちは当然 jQuery(document).ready(function(){ /*コード入れる部分*/ }) でくるんで与えるとする.

完成されたコードは下とようだ. (注意! DTD 宣言を必ず割の!)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<style> 
	#mask {  
	  position:absolute;  
	  z-index:9000;  
	  background-color:#000;  
	  display:none;  
	  left:0;
	  top:0;
	} 
	.window{
	  display: none;
	  position:absolute;  
	  left:100px;
	  top:100px;
	  z-index:10000;
	}
	</style> 
	<script src="http://code.jquery.com/jquery-latest.js"></script> 
	<script> 
	function wrapWindowByMask(){
		//画面の 高さと 幅を 求める.
		var maskHeight = $(document).height();  
		var maskWidth = $(window).width();  

		//マスクの 高さと 幅を 画面 ので 作って 全体 画面を 満たす.
		$('#mask').css({'width':maskWidth,'height':maskHeight});  

		//アニメーション 效果 - 一応 1初動の中 真黒く なってから 80% 不透明島で 行く.
		$('#mask').fadeIn(1000);      
		$('#mask').fadeTo("slow",0.8);    

		//ウィンドウ ような こと 浮かべる.
		$('.window').show();
	}

	$(document).ready(function(){
		//かけることは 幕 浮かべること
		$('.openMask').click(function(e){
			e.preventDefault();
			wrapWindowByMask();
		});

		//閉じる ボタンを 押した 時
		$('.window .close').click(function (e) {  
		    //リンク 基本動作は 作動するの ないように する.
		    e.preventDefault();  
		    $('#mask, .window').hide();  
		});       

		//かけることは 阻む 押した 時
		$('#mask').click(function () {  
		    $(this).hide();  
		    $('.window').hide();  
		});      
	});
	</script> 
</head> 
<body> 
	<div id="mask"></div> 
	<div class="window"> 
		<input type="button" href="#" class="close" value="私は 閉じる ボタン(.window .close)"/> 
	</div> 
	<a href="#" class="openMask">かけることは 幕 浮かべること</a> 
</body> 
</html>

半透明かけることは幕慰労ボックスを浮かべる時ボックスをスクロールと構わずに画面の情中央に来るようにしてたければ ‘[jQuery] レイヤードポップアップボックスを画面情中位置させること(ie入った派幅でもクロムでもだなること)‘を参考すればなる.

タッチイベント（2013-05-31追加）処理

タッチが可能な機器で誤って黒い幕をタッチしてレイヤーを閉じることができるという指摘があった。しかし、画面を移動したり拡大縮小すると、レイヤーが閉まらない。正確にタッチする必要が閉鎖している。このため、混乱を与えないだろうと私は考える。

ただし、サイト企画者の立場では、選択可能なオプションがあるのでいいだろう。もし、黒い幕をタッチした場合には、閉じたくない場合は、Javaスクリプトに次のコードを追加すればよい。（当然 $(document).ready(function(){ ... })の中に。）’touchstart‘イベントを使用した。

// タッチスクリーンで誤ってレイヤーを閉じる場合を防ぐには。
$('#mask').one('touchstart', function () {  
    $(this).unbind('click');
    alert('タッチイベントの時は何も起こらない。');
});

one()は、イベントに応じた関数を一度だけ実行し、そのイベントをunbindする関数である。

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。