Angular.jsで簡単なモーダルを作る

Angular.jsで表示・非表示を切り替えるだけの簡単なモーダルを作ってみます。

サンプルコード

HTML

<div ng-controller="modal_Ctrl">
	<button ng-click="modalShow()">モーダル表示</button>
	<div class="modal-wrapper" ng-show="modalFlag">
		<div class="modal-area">
			<p>モーダルの中身</p>
			<p ng-click="modalHide()">閉じる</p>
		</div>
	</div>
</div>

CSS

.modal-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
}
.modal-area {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 500px;
	height: 300px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: #ffffff;
}

JavaScript

angular.module('app', []).controller('modal_Ctrl', function($scope) {

	$scope.modalFlag = false;
	// モーダル表示
	$scope.modalShow = function() {
		$scope.modalFlag = true;
	}
	// モーダル非表示
	$scope.modalHide = function() {
		$scope.modalFlag = false;
	}

});

trueとfalseの変更で、表示・非表示を切り替えています。
モーダルのデモページ