CSS Modal

Posted by On 10月 20, 2015 0 Comment

Create modal like(tutorial like) UI with CSS

These days, there are many cases to use tutorial like UI in smartphone website.
To realize this, we can use easy CSS.

  • HTML
  • CSS
  • Angular JS

This example uses those 3 things, I didn’t use bootstrap for modal like UI.

Sample

HTML

The key is ng-show,

<html>
<head>
<title>Mobile List</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/index.css">
<link rel="stylesheet" type="text/css" href="styles/head.css">
<link rel="stylesheet" type="text/css" href="styles/modal.css">
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/modal.js"></script>

</head>
<body ng-app="myApp" ng-controller="appController">
<header>
</header>
<button class="btn btn-primary" ng-click="switchModal()">Click Me!</button>
<footer class="footer">
	<div class="container">
		&copy;atmarkplant
	</div>
</footer>
<div class="modallike" ng-show="modalShow" ng-click="switchModal()">
	<div class="modallikecontent">
	</div>
</div>
</body>
</html>

CSS

The important part is modal.css, others are for header and footer and contents
modal.css

.modallike {
	height: 100%;
	width: 100%;
	z-index: 1000;
	position: absolute;
	top: 0;
	-webkit-filter: blur(5px);
}

.modallikecontent {
	height: 100%;
	width: 100%;
	background-color: #000;
	opacity: 0.7;

}

Cover whole view to use height, width 100%

Javascript

To set click event and manage show parameter, I used javascript(Angular JS)

var myapp = angular.module('myApp', []);

myapp.controller('appController', function($scope) {
	$scope.modalShow = false;
	
	$scope.switchModal = function() {
		$scope.modalShow = !$scope.modalShow;
	};
});

Result

Modal Like

TOPICS