Menu icon Foundation
Reveal ajax content by ID

I'm sure it's possible but I can't figure out how I can do it with foundation's reveal modal.

I have a list of projects with a view more button. When clicked, I want to load content into a reveal modal from another page, but only the content from a particular div element on the page with the id 'project-view'.

I have used colorbox in the past to get this effect and you could accomplosh it by appending #project-view at the end of the url from where the content is loaded from.

However, with foundation, the entire page is been loaded into the reveal modal, instead of just content from the #project-view element.

<a data-reveal-id="project-modal" data-reveal-ajax="http://mysite.com/projects/view/1#project-view">View project</a>

<div id="project-modal" class="reveal-modal" data-reveal></div>

<script>
    $(document).foundation();
</script>

revealmodalAJAXelement content

I'm sure it's possible but I can't figure out how I can do it with foundation's reveal modal.

I have a list of projects with a view more button. When clicked, I want to load content into a reveal modal from another page, but only the content from a particular div element on the page with the id 'project-view'.

I have used colorbox in the past to get this effect and you could accomplosh it by appending #project-view at the end of the url from where the content is loaded from.

However, with foundation, the entire page is been loaded into the reveal modal, instead of just content from the #project-view element.

<a data-reveal-id="project-modal" data-reveal-ajax="http://mysite.com/projects/view/1#project-view">View project</a>

<div id="project-modal" class="reveal-modal" data-reveal></div>

<script>
    $(document).foundation();
</script>
Adrian White over 4 years ago

I'm having the same issue on both 5.5.1 and 5.5.2.

Did you find a solution to this?