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?
