[cheesypoof]

You don't have the relevant reveal CSS included or the necessary markup for the modal in your document:

Code: Select all

<div id="myModal" class="reveal-modal" data-reveal>
    <!-- modal content -->
</div>

Also, when using the AJAX method, the target URL (cloned page) should only contain HTML markup that one would normally include within the body element and not include stylesheets or scripts. This would however make that page much less useful to search engines and JS-disabled visitors.

If it were me, I would just strip out all of the Foundation stuff and use http://dimsemenov.com/plugins/magnific-popup/. I say this only because I think you will find it to require less work to integrate in your use case. Just add the stylesheet and script:

Code: Select all

<link href="magnific-popup/magnific-popup.css" rel="stylesheet">

...

<script src="magnific-popup/jquery.magnific-popup.js"></script>

Give all of the links that should open within a popup a class like popup-iframe:

Code: Select all

<a class="popup-iframe" href="<cms:show k_page_link />"><cms:show k_page_title /></a>

Initialize the popups:

Code: Select all

<script>
$(document).ready(function() {
    $(".popup-iframe").magnificPopup({
        type: "iframe"
    });
});
</script>