Splash Modal | popdevelop.com

├── .gitignore ├── README.md ├── index.html ├── splash.js └── splash.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Demo of Angular Splash modal service 2 | 3 | A simple AngularJS service for displaying a full screen splash modal. [Demo](http://popdevelop.github.io/angular-splash-demo/) 4 | 5 | Original source of inspiration: [Codrops blog post](http://tympanus.net/codrops/2014/03/21/google-grid-gallery/) 6 | 7 | Read about more it at [popdevelop.com](http://popdevelop.com/2014/07/sexy-splash-modal-using-bootstrap-css3-and-angularjs/) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Splash Modal | popdevelop.com 6 | 7 | 8 | 9 | 10 |

11 |

12 |

13 | 14 |

15 |

16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /splash.js: -------------------------------------------------------------------------------- 1 | // Module for the demo 2 | angular.module('splashDemo', ['ui.splash']) 3 | .controller('MainCtrl', ['$splash', function ($splash) { 4 | this.openSplash = function () { 5 | $splash.open({ 6 | title: 'Hi there!', 7 | message: "This sure is a fine modal, isn't it?" 8 | }); 9 | }; 10 | }]); 11 | 12 | // Re-usable $splash module 13 | angular.module('ui.splash', ['ui.bootstrap', 'ngAnimate']) 14 | .service('$splash', [ 15 | '$uibModal', 16 | '$rootScope', 17 | function($uibModal, $rootScope) { 18 | return { 19 | open: function (attrs, opts) { 20 | var scope = $rootScope.$new(); 21 | angular.extend(scope, attrs); 22 | opts = angular.extend(opts || {}, { 23 | backdrop: false, 24 | scope: scope, 25 | templateUrl: 'splash/content.html', 26 | windowTemplateUrl: 'splash/index.html' 27 | }); 28 | return $uibModal.open(opts); 29 | } 30 | }; 31 | } 32 | ]) 33 | .run([ 34 | '$templateCache', 35 | function ($templateCache) { 36 | $templateCache.put('splash/index.html', 37 | '

' + 38 | '

' + 39 | '

' 40 | ); 41 | $templateCache.put('splash/content.html', 42 | '

' + 43 | '

' + 44 | '

' + 45 | ' ' + 46 | '

' 47 | ); 48 | } 49 | ]); 50 | -------------------------------------------------------------------------------- /splash.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400); 2 | 3 | body { 4 | font-family: 'Source Sans Pro', sans-serif; 5 | } 6 | 7 | /* Slideshow style */ 8 | .splash { 9 | position: fixed; 10 | background: rgba(0,0,0,0.85); 11 | width: 100%; 12 | height: 100%; 13 | top: 0; 14 | left: 0; 15 | z-index: 500; 16 | opacity: 0; 17 | visibility: hidden; 18 | overflow: hidden; 19 | -webkit-perspective: 1000px; 20 | perspective: 1000px; 21 | transition: opacity 0.5s, visibility 0s 0.5s; 22 | -webkit-transition: opacity 0.5s, visibility 0s 0.5s; 23 | } 24 | 25 | .splash-open.splash { 26 | opacity: 1; 27 | visibility: visible; 28 | -webkit-transition: opacity 0.5s; 29 | transition: opacity 0.5s; 30 | } 31 | 32 | .splash .splash-inner { 33 | width: 100%; 34 | height: 100%; 35 | -webkit-transform-style: preserve-3d; 36 | transform-style: preserve-3d; 37 | -webkit-transform: translate3d(0,0,150px); 38 | transform: translate3d(0,0,150px); 39 | -webkit-transition: -webkit-transform 0.5s; 40 | transition: transform 0.5s; 41 | } 42 | 43 | 44 | .splash-open.splash .splash-inner { 45 | -webkit-transform: translate3d(0,0,0); 46 | transform: translate3d(0,0,0); 47 | } 48 | 49 | .splash .splash-content { 50 | width: 660px; 51 | height: 350px; 52 | position: absolute; 53 | top: 40%; 54 | left: 50%; 55 | margin: -175px 0 0 -330px; 56 | color: #fff; 57 | font-size: 18px; 58 | } 59 | 60 | .splash-content h1 { 61 | color: #fff; 62 | margin-bottom: 40px; 63 | } 64 | 65 | 66 | .btn-outline { 67 | margin-top: 40px; 68 | color: #fff; 69 | border: 2px solid #fff; 70 | border-radius: 2px; 71 | background-color: transparent; 72 | width: 250px; 73 | font-weight: 300; 74 | } 75 | .btn-outline:hover { 76 | color: #fff; 77 | background-color: rgba(255, 255, 255, 0.05); 78 | } 79 | --------------------------------------------------------------------------------