Nesting Modal Windows - Post ID 269965

User 2796380 Photo


Registered User
94 posts

Eric Rohloff wrote:
Give it a try. It looks fairly simple. The JQuery is the important stuff



Above my pay grade.

This should be simple in FF. I noticed there was a "data backbutton" Problem is for me with all of these attributes I don't know what they do or how to use them plus the aria stuff. Where is all of this hidden?
Larry Penny
User 244626 Photo


Registered User
811 posts

Twinstream wrote:
Here is the Foundation version

https://jsfiddle.net/noxquws1/22/

Important to add data-multiple-opened attribute="true" to second modal which should be nested.



This does look like it is simple in Foundation. The attributes are put in right below the elements in the design panel.
Search for the attribute data-multiple-opened and add it. Then set the data attribute to "true".
You can even add custom data attributes.
Just make sure you add the attribute and value to the correct class as in the jsfiddle example.

My aha moment a few months ago was to open my exported index file (and others) in Coffeecup HTML editor and I started to see what the relationship was between the cool settings Coffeecup Responsive software was performing and how that translates to a web page. Once you upoad your page, start using the inspector in Firefox or Chrome to see the code "live". Really eye opening stuff !
Bootstrap 5 CSS Grid.
User 2796380 Photo


Registered User
94 posts

EZorb wrote:
When nesting modal windows you have window 1 open and click on button for modal 2. What I don't know how to do is when you click "close" on window 2 to not close window 1, just close window 2 and default back to window 1.

When you click on modal 2 open button does it cause modal 1 to auto close then open modal 2? If that is so how do you reopen modal 1 when closing modal 2?

Reason need to do this is: I have several nested buttons in window 1. The way it is now have to go back to Start then open window 1 back up to click on modal window 3, then again for window 4.

Does anyone know how to do this?


I have finally figure this out. This is so simple!
On the nested (2nd, 3rd, 4th.....) modal window that is to open, click on its "close button" so Inspector can find correct button. Next click on Design icon. Under Attributes open Aria Label delete value. Then delete Data Close attribute and add Data Open. Set Data Open value to equal the name given to Modal Window 1.
Now instead of modal window i and 2nd modal window closing the Close button will send you back to modal window 1 being able to click on other buttons. This is needed for multiple nested buttons.
Hope this helps someone else.
Larry Penny
User 2796380 Photo


Registered User
94 posts

Twinstream wrote:
Twinstream wrote:
Here is the Foundation version

https://jsfiddle.net/noxquws1/22/

Important to add data-multiple-opened attribute="true" to second modal which should be nested.



This does look like it is simple in Foundation. The attributes are put in right below the elements in the design panel.
Search for the attribute data-multiple-opened and add it. Then set the data attribute to "true".
You can even add custom data attributes.
Just make sure you add the attribute and value to the correct class as in the jsfiddle example.

My aha moment a few months ago was to open my exported index file (and others) in Coffeecup HTML editor and I started to see what the relationship was between the cool settings Coffeecup Responsive software was performing and how that translates to a web page. Once you upoad your page, start using the inspector in Firefox or Chrome to see the code "live". Really eye opening stuff !


Looks like there are two ways to do it.
Thanks
Larry Penny
User 187934 Photo


Senior Advisor
20,190 posts

Cool, I'm glad you guys and gals are picking up on some of this. I was going to chime in again if you had issues but I knew you could get it if you looked at the simple example. I know it doesn't look so simple when you look at it the first time but if you only look for what's different it gets a little less fuzzy.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 244626 Photo


Registered User
811 posts

Eric Rohloff wrote:
Cool, I'm glad you guys and gals are picking up on some of this. I was going to chime in again if you had issues but I knew you could get it if you looked at the simple example. I know it doesn't look so simple when you look at it the first time but if you only look for what's different it gets a little less fuzzy.


Thanks Eric, We APPRECIATE all your support !
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.