Randomly popup a Bootstrap modal

[vnvillar]

Hi guys!

I need your jQuery mastery, forgive me because I’m not good with jQuery stuff.

I’m currently working on a website and my client wants me to show an image randomly using a lightbox and the site visitor will have an option to close that lightbox when it appears. They have about 12 images they wanted to show randomly. Let say the lightbox appears every 3 minutes on the website. Is that possible using Bootstrap’s modal?

Hope I’m descriptive enough. Looking forward to your comments guys and hope you can help me. :)

Best,

Val

[Paulie_D]

What have you tried so far?

We’re happy to help you over the hard points but we’re not a code writing service.

[vnvillar]

Hi Paulie_D!

Thanks for your reply. I am still about to start working on the frontend development side of the project. I totally understand, of course I am not expecting someone to write me the whole code :). But I would really appreciate if you guys can help me give an example that I can look at or a few points that I can start with. :)

Thank you so much!

[Paulie_D]

Google would be your friend here.

I’m sure you could find something.

[vnvillar]

I’ve been looking at Google but I have no luck so far. I did find a stackoverflow question something similar to mine and I saw this on the comments..

“Yes you can use Bootstrap’s modal dialog for that. For your solution to work you may provide a custom startup method, like $('on', 'load', function () { var popsArray = ...; var popup = Math.random() * popsArray.length; ... }) That’s it. As simple as this.”

That looks like a good answer but I don’t understand it. Sorry my jQuery/Javascript skills are 0. :P

[vnvillar]

Here’s what I started with..

window.onload = function () {
          setTimeout($('#myModal').modal('toggle'), 1000);
       }

The modal showed on page load but after I closed the modal, it didn’t show up again. What is it that I’m missing? Hope you can help. :)

Thanks!

[Paulie_D]

You have to think about this logically about what it is you are trying to do.

You want to open a modal on load, (I think) so what you have so far is fine…but you have to start a new countdown when the modal is closed.

So, once the new ‘Timeout’ ends a new modal and image is displayed. So define the function, run it on window load and run it again when the modal is closed.

As a user I’ve told the modal to go away…and you just pop it up again without me asking. See how annoying that would be?

Frankly, if a modal pops up every so often without me asking for it, I’d consider it poor UX and not visit again.

[vnvillar]

Hi Paulie_D!

Yes, that is exactly what the client wanted as they are creative stylists/production designers and they wanted to have an out of the box website which caters only for their audience. So they really don’t care about UX like we always do. :)

Thanks again for your time and input! :)

[Author]

Posts