Bootstrap Backbone Marionette Modal

Question

I'm trying to create a dialog in backbone and Marionette based on this article:

http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/

I have a fiddle here: http://jsfiddle.net/netroworx/ywKSG/

HTML:

<script type="text/template" id="edit-dialog">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3 id="actionTitle">Create a New Action</h3>
</div>
<div class="modal-body">
    <input type="hidden" id="actionId" name="actionId" />
    <table>
        <tbody>
        <tr>
            <td>Goal: </td>
            <td>
                <input type="text" id="goal" name="goal" >   <input type="hidden" id="goalid" name="goalid" >
                <a tabindex="-1" title="Show All Items" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-combobox-toggle ui-state-hover"
                role="button" aria-disabled="false" >
                    <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text"></span>
                </a>
            </td>
        </tr>
        <tr>
            <td>Action name: </td>
            <td>
                <input type="text" id="actionName" name="actionName">
            </td>
        </tr>
        <tr>
            <td>Target date:</td>
            <td>
                <input type="text" id="actionTargetDate" name="actionTargetDate"/>
            </td>
        </tr>
        <tr id="actionActualDateRow">
            <td>Actual date:</td>
            <td>
                <input type="text" id="actionActualDate" name="actionActualDate"/>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href='#' class="btn btn-primary" id="actionActionLabel">Create Action</a>
</div>

</script>            

<div id="modal"></div>

<a href="#" id="showModal">Show Modal</a>

Javascript:

var ActionEditView = Backbone.Marionette.ItemView.extend({
    template: "#edit-dialog"
});

function showModal() {
        var view = new ActionEditView();
        view.render();

        var $modalEl = $("#modal");
        $modalEl.html(view.el);
        $modalEl.modal();
}

$('#showModal').click(showModal);

When I click on the show modal link the html pane goes dark as expected and the dialog content is displayed but on the background layer.

Why is this happening?

Answer 1

you are missing css classes for div, which should act as modal dialog:

<div id="modal" class="modal hide fade"></div>