jiichan.com

PROGRAMMING

javascript
CSS
PHP
Java

モーダルウィンドウをクラス化

モーダルウィンドウは「jQuery：モーダルウィンドウを作ってみる」 で作りましたが、サイトやページ内で複数のモーダルウィンドウを使用する場合やもあるので使いやすいようにクラス化してみました。

モーダルウィンドウが表示されるHTML

一つのページで複数のモーダルウィンドウを使用することを想定して、 モーダルウィンドウを開くボタンを二つ準備しました。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<title>モーダルウィンドウのテスト</title>
		<meta charset="UTF-8">
		<script src="jquery-1.8.0.min.js"></script>
		<script src="mkenModal.js"></script>
		<script src="modal.js"></script>
	</head>
	<body>
		<button type="button" id="modalOpen1">一つ目のモーダルウィンドウ</button>
		<button type="button" id="modalOpen2">二つ目のモーダルウィンドウ</button>
	</body>
</html>

モーダルウィンドウを操作するjavascript

４行目と９行目は表示エリア(contentArea)のスタイル設定です。
idは引数１番目（modal1やmodal2）とcontentAreaを合わせた文字列になります。

$(function(){
	var htmlStr1 = "<p>これは一つ目のモーダルウィンドウです</p>";
	var modal1 = new MkenModal("modal1", "500", "400", htmlStr1);
	$("#modal1contentArea").css({textAlign:"center"});

	var htmlStr2 =
	 "<input type='text' name='abc'  value='これは二つ目のモーダルウィンドウです'>";
	var modal2 = new MkenModal("modal2", "300", "250", htmlStr2);
	$("#modal2contentArea").css({marginTop:"30px", marginLeft:"10px"});
	
	$("#modalOpen1").on("click", function(){
		modal1.showModal();
	});
	$("#modalOpen2").on("click", function(){
		modal2.showModal();
	});

});

クラス化したモーダルウィンドウ（jQueryは使用していません）

最初にモーダルウィンドウ用の関数を準備。
引数は４個あります。ウィンドウを区別するためのmodalNameとコンテンツエリアの幅と高さ、 そしてコンテンツエリアに表示するhtmlです。

// モーダルウィンドウ用の関数
var MkenModal = function(modalName, w, h, htmlStr){
	// モーダルウィンドウを区別するための名前
	this.modalName = modalName;
	// htmlStrを挿入するコンテンツエリアの幅
	this.w = w;
	// htmlStrを挿入するコンテンツエリアの高さ
	this.h = h;
	// コンテンツエリアに表示するhtml
	this.htmlStr = htmlStr;
	if((this.w === "")||(this.h === "")){
		alert("サイズの指定が無効です");
		return;
	}
	if(htmlStr === ""){
		alert("コンテンツが指定されていません");
		return;
	}
	this.createHTML();
	this.setStyle();
	this.setEvent();
};

準備したモーダルウィンドウ用関数に必要な関数群を追加します。
まずはモーダルウィンドウの為の各要素を生成です。
半透明の背景(underLayer)、表示用コンテナ(overLayer)、 そのコンテナに格納される閉じるボタン(closeButton)や、ユーザが定義するhtmlを表示するエリア(contenArea)です。 

// プロトタイプ定義（オブジェクト形式で）
MkenModal.prototype = {
// 各要素を生成
createHTML: function(){
	var underLayer = document.createElement("div");
	underLayer.id = this.modalName + "underLayer";
	var overLayer = document.createElement("div");
	overLayer.id = this.modalName + "overLayer";
	var closeButton = document.createElement("div");
	closeButton.id = this.modalName + "closeButton";
	closeButton.innerHTML = "✕  ";
	var contentArea = document.createElement("div");
	contentArea.id = this.modalName + "contentArea";
	
	document.querySelector("body").appendChild(underLayer);
	document.querySelector("body").appendChild(overLayer);
	overLayer.appendChild(closeButton);
	overLayer.appendChild(contentArea);
	
	contentArea.innerHTML = this.htmlStr;
},

スタイルの設定をします。表示用コンテナ(overLayer)が中央に配置されるようにしています。

//	スタイル設定
setStyle: function(){
	// underLayer
	var un = document.querySelector("#" + this.modalName + "underLayer");
	un.style.display = "none";
	un.style.position = "fixed";
	un.style.top = "0";
	un.style.left = "0";
	un.style.width = "100%";
	un.style.height = "100%";
	un.style.backgroundColor = "#000000";
	un.style.opacity = 0.60;
	// overLayer
	var ov = document.querySelector("#" + this.modalName + "overLayer");
	ov.style.display = "none";
	ov.style.position = "fixed";
	ov.style.top = "50%";
	ov.style.left = "50%";
	ov.style.width = this.w + "px";
	var h = Number(this.h) + 30;	// 30はcloseButtonの高さ
	ov.style.height = h + "px";
	ov.style.backgroundColor = "#ffffff";
	ov.style.marginTop = "-" + (h / 2) + "px";
	ov.style.marginLeft = "-" + (this.w / 2) + "px";
	// closeButton
	var cb = document.querySelector("#" + this.modalName + "closeButton");
	cb.style.position = "absolute";
	cb.style.width = "100%";
	cb.style.height = "30px";
	cb.style.lineHeight = "2";
	cb.style.fontSize = "15px";
	cb.style.textAlign = "right";
	cb.style.top = "0";
	cb.style.left = "0";
	cb.style.color = "#000000";
	cb.style.cursor = "pointer";
	cb.style.backgroundColor = "#cccccc";
	// contentArea
	var ca = document.querySelector("#" + this.modalName + "contentArea");
	ca.style.position = "absolute";
	ca.style.width = "100%";
	ca.style.top = "30px";
	ca.style.left = "0";
},

モーダルウィンドウを開きます。

// モーダルウィンドウを開く
showModal: function(){
	document.querySelector("#"+this.modalName+"underLayer").style.display="block";
	document.querySelector("#"+this.modalName+"overLayer").style.display="block";
},

モーダルウィンドウを閉じます。

// モーダルウィンドウを綴じる
closeModal: function(){
	document.querySelector("#"+this.modalName+"underLayer").style.display="none";
	document.querySelector("#"+this.modalName+"overLayer").style.display="none";
},

閉じる用のボタンにクリックイベントをセットします。

// イベント登録
setEvent: function(){
	var closeButton = document.querySelector("#"+this.modalName+"closeButton");
	var self = this;

	this.addListener(closeButton, "click", function(){
		self.closeModal();
	});
},

IE対策です。

// イベント用関数
addListener: function(elm, ev, listener){
	if(elm.addEventListener) {		// IE以外
		elm.addEventListener(ev, listener, false);
	} else if(elm.attachEvent) {	// IE
		elm.attachEvent('on' + ev, listener);
	} else {
		throw new Error('イベントリスナーに未対応です。');
	}
}
};