Modal

Modal with overlay

by Mike McBride

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div ng-app="app" ng-controller="appCtrl" class="container">
    <div class="wrapper">
        <button ng-click="toggleModal()">Show modal</button>
    </div>
    <div class="modal-wrapper" ng-show="showModal">
        <div class="modal-overlay"></div>
        <div class="modal">
            <div class="modal-header">Header text</div>
            <div class="modal-body">
                <input type="text" placeholder="Name" />
                <input type="text" placeholder="Email" />
                <input type="text" placeholder="Phone number" />
            </div>
            <div class="modal-footer">
                <button ng-click="toggleModal()">Close</button>
            </div>
        </div>
    </div>
</div>

CSS

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v11/CrYjSnGjrRCn0pd9VQsnFOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}

html, body {
    margin: 0px !important;
}

.container {
    font-family: "Roboto";
    height: 100%;
    width: 100%;
}

.wrapper {
    top: 5px;
    position: absolute;
    text-align: center;
    width: 100%;
}

.modal-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
}

.modal-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.75);
}

.modal {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
}

.modal-header {
    position: relative;
    width: 100%;
    line-height: 34px;
    padding: 8px;
    background-color: #0074d9;
    color: #fff;
}

.modal-body {
    padding: 8px;
    line-height: 34px;
    width: 100%;
    height: 250px;
    background-color: #fff;
}

.modal-footer {
    background-color: #fff;
    width: 100%;
    padding: 8px;
    border-top: 1px solid #eee;
    text-align: right;
}

button {
    border: 1px solid #0074d9;
    background: #fff;
    color: #0074d9;
    cursor: pointer;
    padding: 8px;
    border-radius: 3px;
}

button:hover {
    background-color: #0074d9;
    color: white;
}

button:focus {
    outline: none;
}

input {
    display: block;
    border: 1px solid #ccc;
    border-radius: 3px;
    border-color: #ccc;
    background-image: none;
    background-color: #fff;
    font-size: 12px;
    height: 32px;
    width: 85%;
    margin: 8px;
    padding-left: 7px;
    box-shadow: none !important;
}

input:focus {
    border-color: #0074d9;
    box-shadow: none;
    outline: none !important;
}

JavaScript

var mod = angular.module('app', []);

mod.controller('appCtrl', function($scope) {
    $scope.showModal = false;
    $scope.toggleModal = function() {
        $scope.showModal = !$scope.showModal;
    }
});