Dismiss and submit form Bootstrap 3

Question

I have a bootstrap modal dialog that is inside a form. The form is submitted via AJAX. I want the submit button to also dismiss the modal (otherwise i end up with the modal overlay remaining)

Code for the modal is:

@using (Ajax.BeginForm("SaveConfiguredReport", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "report-details", OnBegin="preProcessing" }))
{
    <div class="modal fade" id="add-filter-dialog" tabindex="-1" role="dialog" aria-labelledby="add-filter-dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Add a Filter</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>

                <div class="modal-body">
                    <p>Adding filters allows you to sort what data will be included in the report. These filters will be default for all ongoing usage of this report.</p>
                    <div id="field-templates"></div>
                    <input type="hidden" id="field-template-id" name="FieldTemplateID" />

                    @Html.DropDownList("OperatorID", Model.Operators.Select(x => new SelectListItem { Text = x.Name, Value = x.OperatorID.ToString() }))

                    <input type="text" name="FilterValue" class="typeahead" id="filter-value" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success" data-dismiss="modal" name="Command" value="Add">Add Filter</button>
                </div>
            </div>
        </div>
    </div>
}
<!-- other code -->
<script>
    function preProcessing() {
        $('.modal').each(function (index, element) {
            $(element).modal('hide');
        });
    }
</script>

If i keep the data-dismiss attribute on the submit button, it will dismiss the form but not submit it. If i remove it, the form will be submitted but not dismissed. Anyone had any luck with this?

EDIT
I have added a pre-processor to the AJAX call to hide all forms at the start. Hiding them at the end did not work because the form was replacing the modal but not the overlay. This is a workaround until a proper solution is suggested

Answer 1

What I usually do is close it via Javascript after the form has been validated and AJAX post/get was successful.

$('#add-filter-dialog').modal('hide');

See more options here http://getbootstrap.com/javascript/#modals-usage