[SOLVED] Foundation 3 reveal-modal link to id loads home page instead of the modal contents

I figured out the answer just after I typed the questions, but unable to remove the post now. [ed. note: markh last edited this post 11 years, 3 months ago.]

In the future, feel free to just leave the post and reply or update your first post with the answer; that way others may find it useful in the future too

Indeed, I was interested in seeing how it was "solved"!

That's a good idea.

And actually, I wasn't able to solve my problem. I think the process may be much more involved.

Goal: Attempting to get the Reveal Modal from Foundation 3 to work.

Problem: Button for modal is href="#" which links to the home page, rather than activating the modal window. Then I remembered about the structure for links in MODx [[~id]], etc. But, everything I've tried still just links back to the home page.

I fear that this may be a much more involved process, and perhaps I need to built a snippet to get it to work.

Quote from: sottwell at Jan 12, 2013, 02:56 PM

Indeed, I was interested in seeing how it was "solved"!

That makes two of us.

For now, I just wanted to make the modal window pop up, but can't remember if there is a way to write a null link in modx.
As mentioned, it may be something where I have to write a snippet.

Instead of

this

prevents navigation, and still acts like a regular link for events/styling etc.

The link tag you were looking for was

Basically trying to learn and understand Foundation, most of which is completely over my head. I would just load Flexibility and see how some of the modals and sliders are handled there but:

1. Flexibility says it loads wayfinder, and a few other add-ons and I already have those items installed.

2. I feel like I need to kind of build from the ground up so I can learn it better.

I am working in a test site, so if I wreck it I can start over.

Quote from: markh at Jan 12, 2013, 03:04 PM

Instead of

<a href="#">foobar</a>

this

<a href="javascript:void(0);">foobar</a>

prevents navigation, and still acts like a regular link for events/styling etc.

The link tag you were looking for was

[[~[[*id]]]]

Ah-ha! Double brackets. I had tried single [[*id]] Thank you.

This was the original string that works in a traditional html page
<a href="#" data-reveal-id="exampleModal" class="button">Example modal</a>

I replaced with:
<a href="[[~[[*id]]]]]" data-reveal-id="exampleModal" class="button">Example modal</a>
and still, it links to the home page.

It may be something that requires a snippet.

I've actually install sekfancybox, at got it to working really well. Just thought I would try this Reveal with Foundation.

There's a lot of useful information in Flexibility, not only for learning Foundation, but for MODX in general.

For example, the Switch snippet documentation made little or no sense to me until I saw it in use in Flexibilty. And the menu, you can pick it apart chunk by chunk and see how to integrate an existing css menu with Wayfinder. You also get a form with working formIt calls, and TV's that use varying inputs, and even working Reveal. It's good to take a look at, minimum.

Foundation itself is mostly a fully considered css and js base template, the responsive grid being really about the only non-traditional part you'll need to learn, and of course some of the cool stuff like Reveal and Orbit. It's even far easier to understand when it is working in the MODX way even though Flexibility takes advantage of only a few of the Foundation options.

In addition, installing a package atop an existing package does little or nothing but "reinstall" the package so don't let that stop you. Flexibility will however install a full site, and that site depends on resources being created out of the box on a fresh MODX install. If you know where to find the references and change them in the template however, it shouldn't be an issue. Anywhere the template says [[~11]] it refers to the "site settings" resource. Just replace that id 11 with your actual site settings resource ID.