[SOLVED] Move to next modal, close previous one

Hi,

I have 8 modals of staff members set up. When you click on their photo, the modal opens with their job description. Then in the footer I have a “next” button that brings you to the next staff member’s description so you don’t have to go back to the block of photos and click on the next photo. The only thing I can’t figure out is how to have the previous modal CLOSE when the next one opens. As is, it is layered behind the newly opened modal. Help? Thanks.

Screen cap for reference…

Hi @msm,

Try the following…
Substitute #next-modal-id for what ever IDs you are using in the modals.

href="#next-modal-id" data-toggle="modal" data-dismiss="modal"
1 Like

ok… but where do i put that? I see the modal ID area but I don’t think that’s where you put it…

I can’t put the same ID (“next-modal-id”) as the id for all eight modals, it won’t let you (sorry if this is a dumb question… still learning!) My modals right now all have unique modal numbers (the default that Blocs gives them)…

Each modal needs a unique ID. You want the ID of the next modal to be the href for the next button.

Also on the next button you want to add the following two attributes in the Custom Attribute panel in the side bar.

data-toggle=“modal”
data-dismiss=“modal”

Can you give me an example of what the ID would look like? Say the modal number was 1234…

@msm

I would change them, so its easy to reference. You can call them anything as long as they are unique.

So an example from one of my projects… this modal has an ID called modal-events

05%20AM

If I wanted the next button in an open modal to display this I would need an attribute of the button to be href=“#modal-events

Basically the ID with the hash symbol in front of it.

If you are stuck with getting this sorted, I will make an example Blocs file up for you and post it here for you to look at, but it won’t be today.

Thanks that would be great. I’m sorry, i’m really just not getting it. I’ve tried multiple configurations and none have worked. I understand how the modal works and it works fine except i want the previous to close when i click the next button and the next modal opens… thanks so much for your help i really appreciate it.

@msm

So I built an example, since it wasn’t going to take very long to do.

A couple of things. Un-tick the fade option on the modals or it will flicker when it changes. I have also added a couple of screen shots of the settings for the Next button.

{{ REMOVED FILE - reposted }}

Panel settings for the next button on the modal. This is probably where it was confusing. because you can use the interactions type to set the href. Set the type to “Toggle Modal” and then the modal ID of the next modal you want the button to go to.

09%20AM

You only need to add the one extra custom attribute, because the Modal bric already adds the data-toggle one.

21%20AM

1 Like

uh oh i tried to open this twice and it crashed my Blocs!

Oh really, it opens for me. What version of Blocs are you using? Have you updated it.

version 3.3

@msm I forgot to link two of the images to their modals. here is the amended file.

Modal_Example.bloc (1.4 MB)

Oh right, I am using 3.4.1 I wonder if thats causing it. Can you update.

1 Like

Here is an example video of it in action.

Video

1 Like

Thanks so much… you’re the best! It worked. :smiley:

1 Like

It’s actually a good idea, never thought about doing it before. I might use it sometime in the future.

Awesome - many thanks for this