OTTER MODALS

Modals seem anymore to be in vogue only for interrupting a user's thought or attention flow with an advertisement or 'special offer' to 'join now' etc. In my experience, where modals were sought by design & marketing for signing up or logging in, modals were especially painful on mobile devices and we soon opted to eliminate modals, which, in that particular case, was fairly easy since the site (a storefront for a subscription service) was a Single Page App. All the reasons for not using modals in your flows & funnels aside, I enjoy creating them, especially the challenges that mobile presents. Enter Otter Modals.

Otter Modals is a simple modal feature. The goal was to create a modal content feature with a small footprint and a decent amount of stylability. To achieve this, much of the setup is 'manual', meaning only that there are a few prerequisite requirements outside the scope of the functionality built into Otter.

Otter provides a somewhat inventive solution for displaying 'modal' content on mobile devices i.e. in a 'drawer' (see the demos). Also provided are eight 'intro' animations for accentuation.

To satisfy the desire for simplicity, each modal instance requires a specific HTML structure. In past modal features I've built, I had all of this added dynamically. However this time I felt it 'simpler' to leave the 'how' for getting the modal container and content into the DOM up to the specific abilities of the developer who knows best their existing code. This shouldn't be too difficult and leaves the 'what' content open fairly wide I should think.

The HTML

The HTML structure should look like this:

<div id="{any ID you wish}" class="otter" style="display: none;">
  <div class="otter-outer">
  <!-- The &#215; is a multiplication icon entity. Use whatever fits your branding -->
    <a href="#" class="otter-close o-close-x">&#215;</a>
    <div class="otter-inner">
      {Any content you require} 
      <!-- Add a button or link to close the modal inside the modal content if desired -->
      <p><a href="#" class="otter-close">Close Modal</a></p> 
    </div>
  </div>
</div>                 
                

Visual Design

All of the visual design attributes of the modal is left to the CSS. otter.css has a minimal set of visual styles - the comments within the file indicate what can 'safely' be edited to fit your desired visual style.

If you have more than one modal on a specific page and you wish to have a different look for each, this is easily achieved by adding a class to the otter.css file to override the defaults and add the class to the appropriate HTML element (normally .otter-outer or .otter-inner). See the notes in otter.css.

Configurations

There are several configurations that can be included at instantiation. Of course, none of these are exclusively required, however there are advantages to doing so. You may include only those configurations you require to suit your needs. Any left out will use their default values. Here they are listed with explanation.

• mobileDrawer : {boolean} If 'true', the 'drawer' feature will be used on mobile devices. The default is 'false'. If false, the overlay-modal will be used on mobile devices (and caution regarding content in this case is advised).
• desktopDrawer : {boolean} If 'true', the 'drawer' feature will be used on desktop. The default is 'false'.
• triggerClass : {string} The class name of links that trigger the opening of a modal. This class name is the hook used to attach the event for showing a specific modal. If you have more than one modal with a different configuration on a page, it is important that they use unique class names for the trigger. If not included, the default class name is 'o-trigger', which means you should add this class to any modal trigger used for this modal instance.
• contentHook : {string} Attribute name on each modal trigger containing the ID of the modal container to show. Examples would be 'href', 'rel' or 'data-content'. The default is 'data-content'.
• blurBehind : {string} ID of the wrapping container element of the page content. If you want to blur the content behind the modal (this only applies to modals) to give a sense of distance, the page content must be wrapped in a (div) container with an ID. The CSS property that creates this effect cannot work on the body element itself. The default value is a boolean false.
• overlayClose : {boolean} This allows the user to click on the overlay to close the modal. The default is false.
• animatedIntro : {string} You have available 8 different animated effects to attach to the modal container as it is shown. This is the name of the CSS animation from the following list. The default is a boolean false.
  • bounce
  • rubberBand
  • pulse
  • shake
  • swing
  • tada
  • wobble
  • jello

Instantiation

There is a dependency on jQuery, so be sure to include the jQuery library.

Beyond that, all you need are the otter.css and otter.js files.

Here is an example of setting things up.

var otterdemo = new OTTER();
otterdemo.init({
  'mobileDrawer' : true,
  'desktopDrawer' : false,
  'triggerClass' : 'otterdemo',
  'contentHook' : 'data-content',
  'blurBehind' : 'page',
  'overlayClose' : true,
  'animatedIntro' : 'bounce' 
});
                

And the trigger should look something like this:

<a href="#" class="otterdemo" data-content="hellomodal">trigger for hello modal</a>
                

You can download the files with a demo page from this page, or to ensure you download the latest version (in case I get the time to make improvements) from my github account.

demo modal 1: overlay on both modal and desktop, rubberBand animation

demo modal 2: drawer for mobile, overlay on desktop, click overlay to close, blur the page behind, bounce animation

demo modal 3: no configs provided, all defaults

demo modal 4: drawer for mobile and desktop

demo modal 5: the pulse animation

demo modal 6: the shake animation

demo modal 7: the swing animation

demo modal 8: the tada animation

demo modal 9: the wobble animation

demo modal 10: the jello animation