Loop Through Different Bootstrap Modals on Page Load

Loop Through Different Bootstrap Modals on Page Load

Real quick solution here to making random Bootstrap modals work as pop-up CTA’s for your website. If you’re creating a WP theme, it’s best to include this as a template “part” so it can be easily edited. You could also choose to call in a page “part” via conditional logic in the footer using the WordPress is_page(); function and only call this template part in on specific pages. Regardless of your use case, this will work on even static HTML pages as long as you’re calling in jQuery and other necessary dependencies.

The Modals

This will work with any version of Bootstrap. All that matters in the end is the unique identifiers you use for your modals. So, if you look at a typical Bootstrap modal — I’m using BS 5 for this example, you will see that a modal has a unique identifier (ID) applied to it.

You will see below that the unique ID for the example modal is:

… “exampleModal“. So, in order to make this work for you. You will have to create as many separate modals as you need and edit them to your liking and use case. Keeping in mind that ID’s have to be unique throughout any page, so, as long as you assign these modals (even if you copy and paste) unique ID’s, this solution will work for you. Also, you will not need a trigger button to launch the modal. We’re going to fire this modal based on an event — in this case, a load event

The jQuery

I’m using jQuery safe mode here so you can insert it in a .php or .html page without having to stress. But, feel free to add this to your build using Gulp or Grunt if that’s your style.

No one wants to see a pop-up or modal appear right when the page loads, so, we want to delay the loading of the modal by a few seconds. We also need to direct the jQuery to randomly choose from a list, which modal to load. For this, we will be using the setTimeout(function() to delay the load by 5 seconds or 5000 milliseconds.

Moving forward, now we need to randomize how these modals load. The first thing we need to do is set up some variables to use to cycle through the ID’s of the modals we create. So let’s create a jQuery variable like so (using a different taxonomy than Bootstrap):

var modals = ["myModal1", "myModal2", "myModal3"];

Now we have a string of the unique ID’s of our modals. DO NOT WORRY that they don’t have the “#” ID hash in front of them, we will add that later. It’s more important that we just get the names in the above string. Then we can sort out the details.

At this point, we need to find a way to randomize the choosing of what modal to show when the page loads. Using the Math.random() JavaScript function to randomize the order in which the modals are shown.
Now, we just need another variable to handle this feature:

var rand = modals[Math.random() * modals.length | 0];

Using this model, you can change the jQuery function to say — onMouseOut — if you want these to appear when a user is exiting the page. A lot can be done with this technique. Hopefully this provides a good start.

At this point, we just need a jQuery script that will not only delay the loading of the modal by five seconds, but also, randomize which modal is shown by ID.

This is the final jQuery that handles all of this:

As you can see on line 7 above — we’re adding the unique ID hash via jQuery rather than placing them in the var string. I think this makes for cleaner code and is a safer way to add this special character.

In the end, you can literally create as many Bootstrap modals — as long as they use unique ID’s — and randomize them on page load or on whatever event you would want it to fire on.

Thanks for reading, I hope you enjoyed this article and feel free to share and comment!