by

flexModal: a jQuery Plugin that a CMS will love

Reading Time: 2 minutes

In a previous post, I talked about some general better practices for writing jQuery plugins that will play nicely in content management systems. Today, I’d like to introduce one such plugin: flexModal.

A dab o’ History

flexModal was originally born as a a highly customized version of another jQuery plugin I delivered for a client, when they wanted a CMS-friendly plugin. By the time I finished, not a single line of code remained from the original plugin. Then the client tested the plugin pretty intensely, only for it to never get used. So with a failed kickstart, I added a few more features to it (like working from multiple attributes and event options). Then I got some feedback, ran it through some more tests, and finally put it up on GitHub earlier this week. This is a plugin 9 months in the making.

Why flexModal?

Originally I wanted to call this smartModal…but turns out, that name’s been taken. A few times over. My second choice was dataModal, but that just sounded boring. flexModal does a good job describing what this really is: flexible to the window, flexible to the content author, flexible to the content. So flexModal is the name it gets.

Why does the world need another jQuery plugin?

The whole world? Nahh. But the CMS world might. But since you, the imaginary reader in my brain, asked, here’s some good reasons:

  1. It’s divine: It follows the golden ratio or “divine proportion”; it’ll occupy .618 of the window’s width and height.
  2. It’s liquid:Without any dimensions, it’ll adapt to any screen size and resolution. It naturally takes up 61.8% of the width and height.
  3. It’s smart
    You can set any properties of this modal window from the HTML, the jQuery method, or both. This is a modal window that was developed with the CMS in mind. You don’t need to make a modal window from a JavaScript file any more

What can you configure with it?

The following features can be configured with flexModal:

  • close button
  • top position
  • height, width
  • iframe, or content on a page
  • styles of modal
  • properties and styles of iframe
  • title of the modal

What’s a good example?

Here’s a good example of how you could configure flexModal: 

 Click Me

Want to see it in action?

Where can you find it?

On Github, of course:
https://github.com/paceaux/flex-modal. Fork, clone it, pull it, help make it better. It’s the neighborly thing to do.