runzway/app.css

## app.css
.ng-modal-overlay {
  position:absolute;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000;
  opacity: 0.8;
}

.ng-modal-dialog {
  z-index:10000;
  position: absolute;
  width: 50%;

  top: 10%;
  left: 50%;
  transform: translate(-50%, -10%);
  -webkit-transform: translate(-50%, -10%);
  -moz-transform: translate(-50%, -10%);
  background-color: #fff;
  opacity: 1;
  border: 1px solid #000;
}

.ng-modal-dialog .content {
  color: #000;
  text-align: center;
}

.ng-modal-dialog-content {
  padding:10px;
  text-align: left;
}
.ng-modal-close {
  position: absolute;
  top: 3px;
  right: 5px;
  padding: 5px;
  cursor: pointer;
  font-size: 120%;
  display: inline-block;
  font-weight: bold;
  font-family: 'arial', 'sans-serif';
}

.ng-modal-dialog h1 {
	font-size: 24px;
	margin: 20px 0;
}

.ng-modal-dialog button {
	background-color: #000;
	color: #fff;
}

.ng-modal-dialog button:hover {
	background-color: #000;
}

## app.js
var ctrlzApp = angular.module('ctrlzApp', []);

ctrlzApp.directive('modalDialog', function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: {
            show: '='
        },
        link: function(scope, element, attrs) {
            scope.dialogStyle = {};

            if (attrs.width)
                scope.dialogStyle.width = attrs.width;

            if (attrs.height)
                scope.dialogStyle.height = attrs.height;

            scope.hideModal = function() {
                scope.show = false;
            };
        },
        templateUrl: 'modal-template.html'
    };
});


ctrlzApp.factory('modals', ['$rootScope', function($rootScope) {
    var modals = {};
    var items = {};

	modals.setModal = function(name, data) {
		items[name] = data;
	}

	modals.getModal = function(name) {
		if(items.hasOwnProperty(name)) {
			return items[name];
		} else {
			return false;
		}
	}

	modals.getModals = function() {
		return items;
	}

    return modals;
}]);


ctrlzApp.controller('ModalsCtrl', function ($scope, modals) {
	$scope.modals = modals.getModals();
})

.controller('ContentCtrl', function ($scope, modals) {

	modals.setModal('grats', {
		show: false,
		lot: 'Lorem ipsum dolor sit amet',
		price: 2.99,
		close: function() {
			modals.getModals().grats.show = false;
		}
	});

	$scope.showModal1 = function() {
		modals.getModal('grats').show = true;
	}

});

## index.html
<!doctype html>
<html lang="en" ng-app="ctrlzApp">
<head>
	<meta charset="utf-8">
	<title>Angular Modals How To</title>
	<link rel="stylesheet" href="css/app.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
	<script src="js/app.js"></script>
</head>
<body>

	<section ng-controller="ModalsCtrl">
		<modal-dialog show="modals.grats.show" width="500" height="300">
			<div class="content">
				<h1>Are you sure?</h1>
				<p>{{modals.grats.lot}} at &euro;{{modals.grats.price}}</p>
				<p><button class="button" ng-click="modals.grats.close()">Return to the Auction Room</button></p>
			</div>
		</modal-dialog>
	</section>

	<section ng-controller="ContentCtrl">
		<button ng-click="showModal1()">Show 1st modal</button>
	</section>

	<script type="text/ng-template" id="modal-template.html">
		<div class="ng-modal" ng-show="show">
			<div class="ng-modal-overlay" ng-click="hideModal()"></div>
			<div class="ng-modal-dialog" ng-style="dialogStyle">
				<div class="ng-modal-dialog-content" ng-transclude></div>
			</div>
		</div>
	</script>

</body>
</html>
	.ng-modal-overlay {
	position:absolute;
	z-index:9999;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
	opacity: 0.8;
	}

	.ng-modal-dialog {
	z-index:10000;
	position: absolute;
	width: 50%;

	top: 10%;
	left: 50%;
	transform: translate(-50%, -10%);
	-webkit-transform: translate(-50%, -10%);
	-moz-transform: translate(-50%, -10%);
	background-color: #fff;
	opacity: 1;
	border: 1px solid #000;
	}

	.ng-modal-dialog .content {
	color: #000;
	text-align: center;
	}

	.ng-modal-dialog-content {
	padding:10px;
	text-align: left;
	}
	.ng-modal-close {
	position: absolute;
	top: 3px;
	right: 5px;
	padding: 5px;
	cursor: pointer;
	font-size: 120%;
	display: inline-block;
	font-weight: bold;
	font-family: 'arial', 'sans-serif';
	}

	.ng-modal-dialog h1 {
	font-size: 24px;
	margin: 20px 0;
	}

	.ng-modal-dialog button {
	background-color: #000;
	color: #fff;
	}

	.ng-modal-dialog button:hover {
	background-color: #000;
	}
	var ctrlzApp = angular.module('ctrlzApp', []);

	ctrlzApp.directive('modalDialog', function() {
	return {
	restrict: 'E',
	transclude: true,
	replace: true,
	scope: {
	show: '='
	},
	link: function(scope, element, attrs) {
	scope.dialogStyle = {};

	if (attrs.width)
	scope.dialogStyle.width = attrs.width;

	if (attrs.height)
	scope.dialogStyle.height = attrs.height;

	scope.hideModal = function() {
	scope.show = false;
	};
	},
	templateUrl: 'modal-template.html'
	};
	});


	ctrlzApp.factory('modals', ['$rootScope', function($rootScope) {
	var modals = {};
	var items = {};

	modals.setModal = function(name, data) {
	items[name] = data;
	}

	modals.getModal = function(name) {
	if(items.hasOwnProperty(name)) {
	return items[name];
	} else {
	return false;
	}
	}

	modals.getModals = function() {
	return items;
	}

	return modals;
	}]);


	ctrlzApp.controller('ModalsCtrl', function ($scope, modals) {
	$scope.modals = modals.getModals();
	})

	.controller('ContentCtrl', function ($scope, modals) {

	modals.setModal('grats', {
	show: false,
	lot: 'Lorem ipsum dolor sit amet',
	price: 2.99,
	close: function() {
	modals.getModals().grats.show = false;
	}
	});

	$scope.showModal1 = function() {
	modals.getModal('grats').show = true;
	}

	});
	<!doctype html>
	<html lang="en" ng-app="ctrlzApp">
	<head>
	<meta charset="utf-8">
	<title>Angular Modals How To</title>
	<link rel="stylesheet" href="css/app.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
	<script src="js/app.js"></script>
	</head>
	<body>

	<section ng-controller="ModalsCtrl">
	<modal-dialog show="modals.grats.show" width="500" height="300">
	<div class="content">
	<h1>Are you sure?</h1>
	<p>{{modals.grats.lot}} at €{{modals.grats.price}}</p>
	<p><button class="button" ng-click="modals.grats.close()">Return to the Auction Room</button></p>
	</div>
	</modal-dialog>
	</section>

	<section ng-controller="ContentCtrl">
	<button ng-click="showModal1()">Show 1st modal</button>
	</section>

	<script type="text/ng-template" id="modal-template.html">
	<div class="ng-modal" ng-show="show">
	<div class="ng-modal-overlay" ng-click="hideModal()"></div>
	<div class="ng-modal-dialog" ng-style="dialogStyle">
	<div class="ng-modal-dialog-content" ng-transclude></div>
	</div>
	</div>
	</script>

	</body>
	</html>