<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Components</title>
<meta name="description" content="Web components">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-animate.min.js"></script>
<script src="app.js"></script>
</head>
<body data-ng-app="app">
<div data-ng-controller="TestController">
<button data-ng-click="onOpenModa()">Open Modal</button>
</div>
<mc-modal id="modal-example" src="modal-example.html" title="Modal example"></mc-modal>
</body>
</html>
/* Original code is made with "LESS" */
.mc-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
overflow-y: auto;
z-index: 99999;
}
.mc-modal > .mc-modal-dialog {
width: 400px;
margin: auto;
padding-top: 15%;
}
.mc-modal > .mc-modal-dialog > .mc-modal-content {
border-radius: 4px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
background-color: #FFF;
}
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-header {
height: 50px;
padding: 0 15px;
border-radius: 4px 4px 0 0;
background-color: #F2F2F2;
}
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-header:before,
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-header:after {
content: " ";
display: table;
}
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-header:after {
clear: both;
}
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-header > h5 {
float: left;
margin: 0;
padding: 15px 0;
line-height: 1.4285714285714286;
text-transform: uppercase;
font-weight: bold;
}
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-header > button {
float: right;
margin: 15px 0;
padding: 0 4px;
border-radius: 2px;
border: none;
background: none;
background-color: #DDD;
line-height: 1.4285714285714286;
color: #505458;
}
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-header > button:hover,
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-header > button:focus,
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-header > button:active {
background-color: #505458;
color: #FFF;
}
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-body {
padding: 15px;
border-radius: 0 0 4px 4px;
}
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-body:before,
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-body:after {
content: " ";
display: table;
}
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-body:after {
clear: both;
}
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-footer {
padding: 0 15px 15px 15px;
border-radius: 0 0 4px 4px;
}
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-footer:before,
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-footer:after {
content: " ";
display: table;
}
.mc-modal > .mc-modal-dialog > .mc-modal-content > .mc-modal-footer:after {
clear: both;
}
.mc-modal.mc-modal-animation.ng-hide-add,
.mc-modal.mc-modal-animation.ng-hide-remove {
display: block !important;
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
-ms-transition: all linear 0.1s;
-o-transition: all linear 0.1s;
transition: all linear 0.1s;
}
.mc-modal.mc-modal-animation.ng-hide-remove,
.mc-modal.mc-modal-animation.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
.mc-modal.mc-modal-animation.ng-hide-add,
.mc-modal.mc-modal-animation.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
@media (max-width: 767px) {
.mc-modal > .mc-modal-dialog {
width: auto !important;
padding: 15px !important;
}
}
var app = angular.module('app', ['ngAnimate']);
app.controller('TestController', function ($scope, $rootScope) {
$scope.onOpenModa = function () {
$rootScope.$broadcast('open modal', { id: 'modal-example' });
};
});
app.directive('mcModal', function ($rootScope) {
'use strict';
return {
restrict: 'E',
scope: {
id: '@',
src: '@',
title: '@'
},
template: '<div class="mc-modal mc-modal-animation" data-ng-show="isOpen"> <div class="mc-modal-dialog"> <div class="mc-modal-content"> <div class="mc-modal-header"> <h5>{{ title }}</h5> <button type="button" data-ng-click="onClose()"> <i class="fa fa-times-circle"></i> </button> </div> <div class="mc-modal-body" data-ng-include="src"></div> </div> </div> </div>',
link: function (scope, element, attrs) {
scope.isOpen = false;
scope.onClose = function () {
scope.isOpen = false;
};
$rootScope.$on('open modal', function (event, options) {
scope.isOpen = false;
if (options.id === scope.id) {
scope.isOpen = true;
}
});
}
};
});
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>