CSS Modal

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.



The key is ng-show,

<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>

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


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

.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%


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;


Modal Like