Angular JS Create an Image Modal using CSS

Submitted by nurhodelta_17 on Tuesday, January 23, 2018 - 12:22.

Step 1 : Add our Angular JS

In the header tag or at the bottom of body tag add the ff to include our Angular JS.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

This is the Angular JS that we need to include in order to make use of Angular JS. Note: It is in CDN so you need internet connection for it to work.

Step 2 : Create our Image and our Modal

In the body part of your html, add the ff.

<img id="sampleImg" ng-src="{{ imgSrc }}" alt="{{ alt }}" width="300" height="200" ng-click="showModal()">
 
<!-- Sample Modal -->
<div class="modal" ng-show="myModal">
  <span class="close" ng-click="closeModal()">&times;</span>
  <img class="modal-content" ng-src="{{ imgSrc }}">
  <div id="desc">{{ alt }}</div>
</div>

Using Angular JS, we have set the src of the img in our controller as well as its alt text which we are going to use in the modal as well.

Step 3 : Add Style

Include the ff style.

#sampleImg {
	cursor: pointer;
	transition: 0.3s;
}
 
#sampleImg:hover {opacity: 0.7;}
 
.modal { 
	position: fixed; 
	z-index: 1; 
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
	overflow: auto; 
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.9); 
}
 
.modal-content {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}
 
#desc {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}
 
.modal-content, #desc {    
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}
 
@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)} 
	to {-webkit-transform:scale(1)}
}
 
@keyframes zoom {
	from {transform:scale(0)} 
	to {transform:scale(1)}
}
 
.close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}
 
.close:hover,
.close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}
 
@media only screen and (max-width: 700px){
	.modal-content {
	width: 100%;
}
}

Step 4 : Add our Angular JS Script

Lastly, we add our angular js script.

var app = angular.module('app', []);
 
app.controller('myCtrl', function($scope){
	$scope.myModal = false;
	$scope.imgSrc = 'gardens.jpg';
	$scope.alt = 'An Example of a Beautiful Garden';
 
	$scope.showModal = function(){
		$scope.myModal = true;
	}
 
	$scope.closeModal = function(){
		$scope.myModal = false;
	}
});

In here, we have declared the value for our imgSrc and alt since we already know what they are. Upon clicking the the image image, the showModal function is triggered and will show our myModal modal.

Full HTML

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta charset="utf-8">
	<title>Create an Image Modal using Angular JS</title>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
	<style type="text/css">
		#sampleImg {
		    cursor: pointer;
		    transition: 0.3s;
		}
 
		#sampleImg:hover {opacity: 0.7;}
 
		.modal { 
		    position: fixed; 
		    z-index: 1; 
		    padding-top: 100px;
		    left: 0;
		    top: 0;
		    width: 100%;
		    height: 100%; 
		    overflow: auto; 
		    background-color: rgb(0,0,0);
		    background-color: rgba(0,0,0,0.9); 
		}
 
		.modal-content {
		    margin: auto;
		    display: block;
		    width: 80%;
		    max-width: 700px;
		}
 
		#desc {
		    margin: auto;
		    display: block;
		    width: 80%;
		    max-width: 700px;
		    text-align: center;
		    color: #ccc;
		    padding: 10px 0;
		    height: 150px;
		}
 
		.modal-content, #desc {    
		    -webkit-animation-name: zoom;
		    -webkit-animation-duration: 0.6s;
		    animation-name: zoom;
		    animation-duration: 0.6s;
		}
 
		@-webkit-keyframes zoom {
		    from {-webkit-transform:scale(0)} 
		    to {-webkit-transform:scale(1)}
		}
 
		@keyframes zoom {
		    from {transform:scale(0)} 
		    to {transform:scale(1)}
		}
 
		.close {
		    position: absolute;
		    top: 15px;
		    right: 35px;
		    color: #f1f1f1;
		    font-size: 40px;
		    font-weight: bold;
		    transition: 0.3s;
		}
 
		.close:hover,
		.close:focus {
		    color: #bbb;
		    text-decoration: none;
		    cursor: pointer;
		}
 
		@media only screen and (max-width: 700px){
		    .modal-content {
		        width: 100%;
		    }
		}
	</style>
</head>
<body ng-controller="myCtrl">
 
<img id="sampleImg" ng-src="{{ imgSrc }}" alt="{{ alt }}" width="300" height="200" ng-click="showModal()">
 
<!-- Sample Modal -->
<div class="modal" ng-show="myModal">
  <span class="close" ng-click="closeModal()">&times;</span>
  <img class="modal-content" ng-src="{{ imgSrc }}">
  <div id="desc">{{ alt }}</div>
</div>
 
<script>
var app = angular.module('app', []);
 
app.controller('myCtrl', function($scope){
	$scope.myModal = false;
	$scope.imgSrc = 'gardens.jpg';
	$scope.alt = 'An Example of a Beautiful Garden';
 
	$scope.showModal = function(){
		$scope.myModal = true;
	}
 
	$scope.closeModal = function(){
		$scope.myModal = false;
	}
});
</script>
</body>
</html>

That ends this tutorial. Happy Coding :)

Add new comment

63 views