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.
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"> ©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; }; });