Getting image crop to work from a modal in Foundation 6... how?

I'm afraid I can't really speak to what Javascript errors may be interacting with Ansel's Javascript to cause the error. I can't think of any reason in particular why Ansel's markup couldn't be in whatever modal you need on the page and just hidden until some button click or whatever, but it would definitely need to be present on the page at load time for Ansel's JS to initialize properly.

If you post the exact console error you're getting, as well as hopefully the line number and file name (hopefully source mapping is working) I might be able to provide a little more guidance.

The markup is quite straightforward. The image field is "list_portrait_field" (an Ansel field). The channel and URL title values are stored in layout variables. The modal is triggered using standard Foundation method (add 'data-open="#list_portrait_image_modal" to the relevant tag). The modal markup is:

<div class="reveal" id="list_portrait_image_modal" data-reveal>

{exp:channel:form channel="{layout:found_channel_short_name}" url_title="{layout:list_url_title}" json="yes" author_only="yes"}
    <input type="hidden" name="list_portrait_image_filedir" value="1">
    <label for="list_portrait_image">Choose a portrait image for your list</label>
    {field:list_portrait_image}
    <button type="submit" name="submit" class="button">Save</button>
{/exp:channel:form}

</div>

The image field is defined with reference to an "Assets" file directory (i.e. in the Ansel definition).

When this form is used and the input field is a regular text field the modal works just fine. When the input field is an Ansel field there are multiple issues.

If there is no image defined, the dialog box opens, and contains a field for uploading a new image. Adding an image to this field causes an animation of a file being uploaded, a 'tick' appearing over the image icon, and its subequent disappearance). But the image does not appear in the image table below, nor is this image added to the entry (or Assets directory).

If there is an image already defined in the field, the dialog opens and an Ansel field is shown with the image (on the second row of the image table), but in this image the crop buttons are inoperative (although the 'delete' button does work).

While this is going on multiple errors appear in the browser console. Mostly of this type, associated with dropzone.js (429), and multiple instances of VMxxxx_script.min.js:

Uncaught Error: Dropzone already attached.

at new c (VM1116 script.min.js:1)
at f.init (VM1116 script.min.js:6)
at new f (VM1116 script.min.js:2)
at Object.construct (VM1116 script.min.js:2)
at f.init (VM1116 script.min.js:5)
at new f (VM1116 script.min.js:2)
at Object.construct (VM1116 script.min.js:2)
at f.initField (VM1116 script.min.js:6)
at HTMLDivElement.<anonymous> (VM1116 script.min.js:6)
at Function.each (?ACT=3&ui=core,widge…&include_jquery=y:2)

A second error type

"TODO: image load failed"

is reported against a VMxxxx_script.min.js (5). and AnselCrop.js (83).

I have checked, and the VMxxxx_script.min.js scripts are all Ansel related (e.g. VM1120_script.min.js begins "window.ANSEL = window.ANSEL || {}," for example).

Dropzone.js is used by Ansel and one other add-on on the site (Assets).