anabarasan/modal.dialog.html

## modal.dialog.html
<!DOCTYPE html>
<html>
<head>
    <style>
        .angular-modal-backdrop {
            position:fixed; top:0; left:0; width:100%; height:100%;
            background-color:rgba(0,0,0,0.8); z-index:10; }
        .angular-modal-dialog {
            position: fixed; width: auto; top: 50%; left: 50%;
            background-color: #fff; box-shadow: 4px 4px 80px #000;
            z-index:11; transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%); border-radius:5px;}
        .angular-modal-close {
            position: absolute; top: -13px; right: -13px; cursor: pointer; }
    </style>
    <script src="angular.js"></script>
    <script>
        angular
            .module("modal",["modal.html"])
            .directive("modaldialog", function(){
                return {
                    restrict: 'E',
                    scope: {
                        show: '=',
                        backdrop: '=',
                        model: '='
                    },
                    replace: true,
                    transclude: true,
                    link: function(scope, element, attrs) {
                        scope.dialogStyle = {};
                        if (attrs.width)
                            scope.dialogStyle.width = attrs.width;
                        if (attrs.height)
                            scope.dialogStyle.height = attrs.height;
                        scope.close = function() {
                            scope.show = false;
                        };
                    },
                    templateUrl : "modal.html"
                };
            })
            .controller("myctrl", function($scope){
                $scope.showmodal = false;
                $scope.backdrop = true;
                $scope.modalinfo = {name:'anbarasan', age:24};
                $scope.updateinfo = function(name){
                    $scope.modalinfo.name = name;
                };
                $scope.sample="sample text";
                $scope.togglemodal = function() {
                    $scope.showmodal = !$scope.showmodal;
                }
            })
    </script>
    <script>
        angular.module("modal.html",[]).run(function($templateCache){
            $templateCache.put("modal.html",
                "<div ng-show='show'>" +
                    "<div class='angular-modal-backdrop' ng-show='backdrop' ng-click='close();'></div>" +
                    "<div class='angular-modal-dialog' ng-style='dialogStyle'>" +
                        "<div class='angular-modal-close'>" +
                            "<a href='#' ng-click='close();'>" +
                                "<img src='modalClose.png' />" +
                            "</a>" +
                        "</div>" +
                        "<div ng-transclude></div>" +
                    "</div>" +
                "</div>"
            );
        })
    </script>
    <title>Modal Dialog</title>
</head>
<body ng-app='modal'>
    <div ng-controller='myctrl'>
        <div style="height:1000px;"></div>
        {{modalinfo}}
        <button ng-click='togglemodal()'>Open Modal Dialog</button>
        <modaldialog show='showmodal' model='modalinfo' backdrop='backdrop' keyboard='false'
                     width='650px'>
                <p>Modal Content Goes here</p>
                <input type="text" ng-model="sample"/>
                <input type="button" value="update"
                    ng-click="updateinfo(sample)"/>
        </modaldialog>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.angular-modal-backdrop {
	position:fixed; top:0; left:0; width:100%; height:100%;
	background-color:rgba(0,0,0,0.8); z-index:10; }
	.angular-modal-dialog {
	position: fixed; width: auto; top: 50%; left: 50%;
	background-color: #fff; box-shadow: 4px 4px 80px #000;
	z-index:11; transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%); border-radius:5px;}
	.angular-modal-close {
	position: absolute; top: -13px; right: -13px; cursor: pointer; }
	</style>
	<script src="angular.js"></script>
	<script>
	angular
	.module("modal",["modal.html"])
	.directive("modaldialog", function(){
	return {
	restrict: 'E',
	scope: {
	show: '=',
	backdrop: '=',
	model: '='
	},
	replace: true,
	transclude: true,
	link: function(scope, element, attrs) {
	scope.dialogStyle = {};
	if (attrs.width)
	scope.dialogStyle.width = attrs.width;
	if (attrs.height)
	scope.dialogStyle.height = attrs.height;
	scope.close = function() {
	scope.show = false;
	};
	},
	templateUrl : "modal.html"
	};
	})
	.controller("myctrl", function($scope){
	$scope.showmodal = false;
	$scope.backdrop = true;
	$scope.modalinfo = {name:'anbarasan', age:24};
	$scope.updateinfo = function(name){
	$scope.modalinfo.name = name;
	};
	$scope.sample="sample text";
	$scope.togglemodal = function() {
	$scope.showmodal = !$scope.showmodal;
	}
	})
	</script>
	<script>
	angular.module("modal.html",[]).run(function($templateCache){
	$templateCache.put("modal.html",
	"<div ng-show='show'>" +
	"<div class='angular-modal-backdrop' ng-show='backdrop' ng-click='close();'></div>" +
	"<div class='angular-modal-dialog' ng-style='dialogStyle'>" +
	"<div class='angular-modal-close'>" +
	"<a href='#' ng-click='close();'>" +
	"<img src='modalClose.png' />" +
	"</a>" +
	"</div>" +
	"<div ng-transclude></div>" +
	"</div>" +
	"</div>"
	);
	})
	</script>
	<title>Modal Dialog</title>
	</head>
	<body ng-app='modal'>
	<div ng-controller='myctrl'>
	<div style="height:1000px;"></div>
	{{modalinfo}}
	<button ng-click='togglemodal()'>Open Modal Dialog</button>
	<modaldialog show='showmodal' model='modalinfo' backdrop='backdrop' keyboard='false'
	width='650px'>
	<p>Modal Content Goes here</p>
	<input type="text" ng-model="sample"/>
	<input type="button" value="update"
	ng-click="updateinfo(sample)"/>
	</modaldialog>
	</div>
	</body>
	</html>