Close modal dialog backdrop after ajax form submission.

Hi guys, I'm using the bootstrap modal component and I have a tapestry ajax
form nested within it. When I submit the form I'm looking to close out the
modal dialog box assuming no clientside validation errors ocure long with
the backdrop. I have it working with the exception of closing out the
backdrop. Does anybody know how to achieve this?

The code.

<div t:type="zone" t:id="dailyCommentZone" id="dailyCommentZone">
<t:if test="hasDailyComments">
<t:modalContainer clientId="dailyCommentModal">
<t:form t:id="formDailyComment" zone="dailyCommentZone">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h4 class="modal-title">${dailyCommentTitle}
Daily Comment</h4>
</div>
<div class="modal-body">
<t:textarea t:id="dailyComment"
value="dailyCommentText" validate="required"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
<t:submit t:id="dailyCommentSubmit" value="Add
Comment" class="btn btn-success dailyCommentSubmit"/>
</div>
</div>
</t:form>
</t:modalContainer >
</t:if>
</div>

ModalContainer.tml

<div id="${clientId}" class="modal fade" role="dialog" xmlns:t="
http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter">
<div class="modal-dialog">
<t:body/>
</div>
</div>

@Parameter(required = true, defaultPrefix = BindingConstants.LITERAL)
@Property
private String clientId;

public void afterRender() {
JSONObject json = new JSONObject("id", clientId);
javaScriptSupport.require("warning-modal").with(json);

define(["jquery", "bootstrap/modal"], function($) {

runDialog = function(spec) {

$("#" + spec.id).modal();

};
return runDialog;
});