Create animated modal popups to promote your latest updates

Add a beautiful modal popup to your NationBuilder site so supporters can easily keep up to date with recent news related to your campaigns.

Create animated modal popups to promote your latest updates
NOTE: You'll need to create a custom theme for your NationBuilder site if you don't already have one.

Sometimes you want a news or update page to really jump out. By using our animated modal feature you can add an attention-grabbing design to draw your readers into the content you want to highlight.

In this tutorial we will show you how to create a modal containing the latest news items from across your site, complete with a headline, thumbnail image, excerpt text and a read more button.

View the live example

How to create your latest news modal

Step 1

Download the relevant files from this GitHub repository and upload them to your theme:_
HTML: _modal_latest_news.html
CSS: animate.min.css
JS: animatedModal.min.js
_Note: you’ll need to
 create a custom theme if you don’t already have one.

Step 2

In the layout.html file, include the new stylesheet before the closing </head>tag with this line of code:

<link rel="stylesheet" type="text/css" href="animate.min.css" />

The screenshot below is a guide to where that additional stylesheet can be included:

Add this CSS file before the closing </head> tag in your layout.html file.

Alternatively, you can copy the contents of that CSS file into your main stylesheet.

Step 3

Also in the layout.html file, include the modal directly before the closing </body>tag with this line of code:

{% include "modal_latest_news" %}
Step 4

Finally, add a button your supporters can click to open the latest news modal. Simply paste the following code wherever you want that button to appear:

<a class="btn btn-lg btn-primary" id="latest-news-button" href="#modal-latest-news">See the latest news</a>

It’s also possible to open the modal automatically using JavaScript. This can be useful if you wish to show the latest news modal when a supporter has been on your site for a set period of time, or if they navigate to a certain section or match some other criteria (e.g. if they live in a particular city).

One last tip

As you can see from the live example, the modal includes a thumbnail image for each news update. The code uses the social media image from each post as the thumbnail, so you should always make sure to upload a social media share image to all your latest news items.

Conclusion

That’s it for this tutorial :) If you wish to change the animations you can update the JavaScript at the bottom of the _modal_latest_news.html file. Refer to the Animate.css documentation for the full list of animation options.

Here you have seen how to create a latest news modal, but there are plenty of other options for this tool. For example, you can create a modal signup form that opens automatically when a supporter has been on your site for a set period of time or has scrolled down a certain percentage of the page. Check back for our future tutorials to see other implementation options.

In the meantime, all the best with your campaigns!

Get the code

View the live example


The animate.css plugin is free for personal work and for non-profit organisations otherwise make sure to purchase the relevant licence.

Have any questions about how all this works? We’re always happy to help. Flick an email to info@codenation.com or write to us in the comments.


Have any questions? We're always happy to help
Get in touch on email: info@codenation.com