Fullscreen splash modal

View the demo

Recently I came across a beautiful slideshow image gallery by the extremely talented Mary Lou over at Codrops blog. This blog is one of my absolute favorite source of inspiration for UX and design concepts.

What caught my attention was the super slick entering and exit animations. In this tutorial I’m going to use parts of the CSS in the Codrops tutorial to create an easy to use, full screen modal service using AngularJS, Bootstrap and the UI-Bootstrap components. Let’s get down to business.

Here’s the HTML template we’re going to use

We’ll begin with defining a new module ui.splash with a small service that wraps the $modal service into an easy to use $splash service.

As you can see, I’m using some magical template paths as templateUrl and windowTemplateUrl. What is that all about?

In the newest version (0.11.0) of the UI-Bootstrap $modal component you can specify a custom modal template, using the windowTemplateUrl option, to use in place of the bootstrap standard. So lets define this template for our full screen modal and put in in the template cache:

Next, we’ll need add template for the content to put inside the modal. In this demo I’ll have a title, a message and a button to close the modal. You may want to add additional content to fit your purpose.

Finally, we’ll create a small controller to just wire together the HTML with our new $splash service:

To make all this look nice I’m going to use parts of the CSS from the Coderops tutorial, but with a slight modification. The interesting part where the animation is added is the splash-open class which is added by the ng-class directive in the template above. Here is an excerpt of the CSS so you get the idea:

The result is absolutely beautiful. Thanks again to Mary Lou for this subtle but stunning effect. Be sure to check out full source code and demo over at Github.

Currently, I’m using this splash service for showing introductional and other important information in the dashboard for our new service Castle (real time user account monitoring and protection).

That’s all for now. See you next time!