How to fix Foundation.js moving reveal modal html from backbone view

Question

I'm developing a website with backbone.js, and foundation.js. I create a backbone parent view, and append a backbone child view to it.

    this.myProfileModalView = new MyApp.Views.MyProfileModalView();
    this.$el.append(this.myProfileModalView.render().el);

This child view contains the html for foundation reveal modal.

<div id="profileModal" class="reveal-modal medium" data-options="close_on_background_click:false;" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" >

When the site loads the modal is correctly appended in the html as a child. However, when I click on the open modal button, the modal html suddenly gets placed just before the tag. This is making backbone events to not function, and also this.$el comes up null.

How can I fix this issue so that the appended view stays at the same location?

user1801879 user1801879 · Accepted Answer · 2015-05-29T11:54:04

For anyone looking for the answer, I fixed this error by adding root_element:

this.myProfileModalView.$el.find('#profileModal').foundation('reveal', 'open', {
        close_on_background_click:false,
        close_on_esc: false,
        animation: 'fadeAndPop',
        root_element: this.myProfileModalView
    })

How to fix Foundation.js moving reveal modal html from backbone view

1 Answers