<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/LukaszWatroba/pen/MYOBKb?depth=everything&limit=all&order=popularity&page=9&q=modal&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Lato:300,700,300italic' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='https://lukaszwatroba.github.io/valitycss/dist/vality.min.css'>
<style class="cp-pen-styles">/***************************************
vModal
***************************************/
/**
* Example HTML:
*
<v-modal class="vModal--default" close="[ctrl method]">
<v-dialog role="dialog" fit middle>
<button aria-label="close" v-close></button>
[content]
</v-dialog>
</v-modal>
*/
/* Base
***************************************/
v-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
overflow-x: hidden;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.5);
padding: 40px 20px;
}
v-modal v-close {
position: absolute;
top: 0;
right: 0;
}
v-dialog {
display: block;
position: relative;
pointer-events: auto;
background: white;
z-index: 0;
min-width: 240px;
outline: 0;
max-width: 560px;
}
v-dialog:focus {
outline: 0;
}
v-dialog[middle] {
max-height: 100%;
overflow-y: auto;
}
v-dialog[fit] {
width: 100%;
}
v-dialog[small] {
max-width: 340px;
}
@media (min-width: 340px) {
v-dialog[small] {
min-width: 340px;
}
}
v-dialog[medium] {
max-width: 560px;
}
@media (min-width: 560px) {
v-dialog[medium] {
min-width: 560px;
}
}
v-dialog[large] {
max-width: 780px;
}
@media (min-width: 780px) {
v-dialog[large] {
min-width: 780px;
}
}
v-close {
display: inline-block;
z-index: 10;
cursor: pointer;
outline: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
v-close:hover, v-close:focus {
outline: 0;
}
[v-modal-open] {
overflow: hidden;
}
v-modal {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
v-dialog {
-ms-flex-item-align: start;
align-self: flex-start;
}
v-dialog[middle] {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
/* Theme: default
***************************************/
.vModal--default {
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.vModal--default v-dialog {
will-change: transform;
padding: 20px;
border-radius: 2px;
-webkit-animation: vDialog-enter 0.5s;
animation: vDialog-enter 0.5s;
}
.vModal--default v-close {
width: 40px;
height: 40px;
}
.vModal--default v-close::after, .vModal--default v-close::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 12px;
height: 1px;
width: 16px;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.vModal--default v-close::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.vModal--default v-close::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.vModal--default v-close::after, .vModal--default v-close::before {
background-color: #2196F3;
-webkit-transition: background-color 0.25s;
transition: background-color 0.25s;
}
.vModal--default v-close:hover::after, .vModal--default v-close:hover::before, .vModal--default v-close:focus::after, .vModal--default v-close:focus::before {
background-color: #F44336;
}
.vModal--default.ng-enter {
opacity: 0;
}
.vModal--default.ng-enter-active {
opacity: 1;
}
.vModal--default.ng-leave {
opacity: 1;
}
.vModal--default.ng-leave-active {
opacity: 0;
}
/* Theme: default (animations) */
@-webkit-keyframes vDialog-enter {
0% {
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes vDialog-enter {
0% {
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
</style></head><body>
<div ng-app="myApp" id="container">
<div class="u-wrapper u-paddingHm u-paddingTl" ng-controller="MainController as mainCtrl">
<header class="u-marginBl u-textCenter">
<div>
<svg class="u-inlineBlock" width="58px" height="58px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><g><path fill="#4CAF50" d="M3.1,27.9c0,0,10.2-24.1,11.6-27.2c0.2-0.5,0.6-0.8,1.2-0.6c0.5,0.1,0.8,0.7,1.5,2.2c1.3,2.9,18,37.2,18.7,38.6c0.8,1.6,1,2.6,0.7,3.4c-0.3,0.6-1,1.1-1.8,1.4c-2.3,0.9-20.3,7.8-21.5,8.3c-0.7,0.3-0.8-0.4-1.4-1.7C11.6,51,3.7,32.1,3.1,30.7C2.5,29.3,3.1,27.9,3.1,27.9z"/><path fill="#2196F3" d="M50.9,17.3c-0.3-0.3-0.4-0.4-0.7-0.2c-0.3,0.1-11.5,8.6-16.8,12.5c2.7,5.5,4.7,9.7,5,10.2c0.4,0.8,0.8,1.7,1,2.6c0.1-0.2,0.2-0.3,0.3-0.5c0.9-1.8,11.3-23.4,11.5-23.8C51.3,17.7,51.2,17.7,50.9,17.3z"/></g></svg>
<h2 class="u-marginTs">vModal</h2>
</div>
<h5 class="u-marginBl">Simple, flexible and beautiful modal dialogs in AngularJS.</h5>
<hr>
</header>
<div class="u-textCenter u-marginBl">
<button class="Button Button--default Button--lg u-marginAs" ng-click="mainCtrl.openLoginModal()">Modal 1</button>
<button class="Button Button--default Button--lg u-marginAs" ng-click="mainCtrl.openLoremModal()">Modal 2</button>
<button class="Button Button--default Button--lg u-marginAs" ng-click="mainCtrl.openInfoModal()">Modal 3</button>
</div>
<hr>
<footer class="u-cf u-paddingBl">
<div class="u-textCenter">
<a href="https://codepen.io/LukaszWatroba" target="_blank" class="u-inlineBlock u-linkClean">
<svg width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><g><path fill="#2196F3" d="M3.1,27.9c0,0,10.2-24.1,11.6-27.2c0.2-0.5,0.6-0.8,1.2-0.6c0.5,0.1,0.8,0.7,1.5,2.2c1.3,2.9,18,37.2,18.7,38.6c0.8,1.6,1,2.6,0.7,3.4c-0.3,0.6-1,1.1-1.8,1.4c-2.3,0.9-20.3,7.8-21.5,8.3c-0.7,0.3-0.8-0.4-1.4-1.7C11.6,51,3.7,32.1,3.1,30.7C2.5,29.3,3.1,27.9,3.1,27.9z"/><path fill="#2196F3" d="M50.9,17.3c-0.3-0.3-0.4-0.4-0.7-0.2c-0.3,0.1-11.5,8.6-16.8,12.5c2.7,5.5,4.7,9.7,5,10.2c0.4,0.8,0.8,1.7,1,2.6c0.1-0.2,0.2-0.3,0.3-0.5c0.9-1.8,11.3-23.4,11.5-23.8C51.3,17.7,51.2,17.7,50.9,17.3z"/></g></svg>
<br>
<small>
By Łukasz Wątroba
</small>
</a>
</div>
</footer>
</div>
<script type="text/ng-template" id="login-modal-template.html">
<v-modal class="vModal--default" onclose="loginModal.close()">
<v-dialog heading="Account Login" small>
<v-close label="Close"></v-close>
<h3 id="loginModalHeading" class="u-marginBm">Account Login</h3>
<form class="Form" name="loginForm">
<div class="Form-item Form-item--stacked">
<label class="Form-label" for="emailInput">Email</label>
<input class="Input Input--default u-sizeFull" ng-model="model.email" type="email" id="emailInput" name="email" placeholder="hi@yourdomain.com">
</div>
<div class="Form-item Form-item--stacked">
<label class="Form-label" for="passwordInput">Password</label>
<input class="Input Input--default u-sizeFull" ng-model="model.password" type="password" id="passwordInput" name="password" placeholder="••••••">
</div>
</form>
<hr>
<div>
<button class="Button Button--default Button--lg">Login</button>
<small class="u-inlineBlock u-marginHs u-alignMiddle">or</small>
<button class="Button">Create Account</button>
</div>
</v-dialog>
</v-modal>
</script>
<script type="text/ng-template" id="lorem-modal-template.html">
<v-modal class="vModal--default" onclose="loremModal.close()">
<v-dialog heading="{{ title }}" large middle>
<v-close label="Close"></v-close>
<h3 class="u-marginBm">
{{ title }}
</h3>
<p class="u-marginBm">
{{ content }}
</p>
</v-dialog>
</v-modal>
</script>
<script type="text/ng-template" id="info-modal-template.html">
<v-modal class="vModal--default">
<v-dialog heading="vModal" middle>
<h4 class="u-marginBs">vModal</h4>
<p>
Simple, flexible and beautiful modal dialogs in AngularJS.<br>
</p>
<p>
<small>Click on the "Cancel" button to close this dialog.</small>
</p>
<div class="u-marginTm">
<a class="Button Button--default u-marginRm" href="https://github.com/LukaszWatroba/v-modal" target="_blank">Fork me on GitHub</a>
<button class="Button" ng-click="infoModal.close()">Cancel</button>
</div>
</v-dialog>
</v-modal>
</script>
</div>
<!-- Fork me on GitHub ribbon -->
<a href="https://github.com/LukaszWatroba/v-modal" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js'></script><script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js'></script><script src='https://lukaszwatroba.github.io/v-modal/dist/v-modal.js'></script>
<script >(function (angular) {
'use strict';
angular.module('myApp',
[
'ngAnimate',
'vModal'
])
.config(function (modalConfig) {
modalConfig.containerSelector = '#container';
})
.factory('loginModal', function (vModal) {
return vModal({
controller: 'LoginController',
controllerAs: 'loginModal',
templateUrl: 'login-modal-template.html'
});
})
.factory('infoModal', function (vModal) {
return vModal({
controller: 'InfoController',
controllerAs: 'infoModal',
templateUrl: 'info-modal-template.html'
});
})
.factory('loremModal', function (vModal) {
return vModal({
controller: 'LoremController',
controllerAs: 'loremModal',
templateUrl: 'lorem-modal-template.html'
});
})
.controller('LoginController', function ($scope, loginModal) {
var ctrl = this;
ctrl.close = loginModal.deactivate;
})
.controller('LoremController', function ($scope, loremModal) {
var ctrl = this;
ctrl.close = loremModal.deactivate;
})
.controller('InfoController', function ($scope, infoModal) {
var ctrl = this;
ctrl.close = infoModal.deactivate;
})
.controller('MainController', function (loginModal, infoModal, loremModal) {
var ctrl = this;
var lorem = {
title: 'Lorem ipsum',
content: 'Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue.'
};
ctrl.openLoginModal = loginModal.activate;
ctrl.openInfoModal = infoModal.activate;
// Add params to the modal $scope
ctrl.openLoremModal = function () {
loremModal.activate(lorem);
};
});
})(angular);
//# sourceURL=pen.js
</script>
</body></html>
