Create an animated modal popup to promote your latest updates

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

3 min readJan 8, 2018

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. See the Next Steps section below for other ideas and look out for our future tutorials to help incorporate other useful features in your NationBuilder website.

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" />

Th 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.

Next Steps

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 a certain percentage down the page. Check back for our future tutorials to see other implementation options.

In the meantime, all the best with your campaigns!