This is my custom function and div. When I click the function, it executes successfully but the modal window remains visible.
<script type="text/javascript>
$(document).ready(function () {
$("#btnRespuesta").click(function () {
//alert('entre a btnRespuesta');
$('#btnRespuesta').attr('disabled', true);
$.ajax({
url: "/PreguntasConfigs/guardarRespuesta/",
data: { respuesta: $("#respuesta").val(), idPregunta: $("#idPreguntaAsociada").val(), idRespuesta: $("#idRespuesta").val(), tipo: $("#tipo").val(), id_periodo: $("#periodo").val() },
success: function (result) {
//alert(result);
$('#preguntas' + $("#idPreguntaAsociada").val() + ' tbody').replaceWith(result);
$("#idPreguntaAsociada").val(0);
$("#idRespuesta").val(0);
$("#respuesta").val("");
$('#btnRespuesta').attr('disabled', false);
$("#tipo option[value='-1']").prop("selected", true);
$("#periodo option[value='-1']").prop("selected", true);
}
}).error(function () {
alert('Unknown Error');
}).fail(function () {
alert('Error connecting to server');
});
});
});
</script>
<!-- Modal responses -->
<div class="modal fade" id="modalResponses" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="responseTitle" class="modal-title">New Response for:</h4>
<h5 id="questionTitleResponse" class="modal-title">Question</h5>
</div>
<div class="modal-body">
<div class="form-horizontal">
<form id="loginForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-3" for="question">Response</label>
<div class="col-md-8">
<input type="hidden" id="idQuestionAssociated" name="idQuestionAssociated" value="0" />
<input type="hidden" id="idResponse" name="idResponse" value="0" />
<textarea required style="resize:none;" class="form-control text-box single-line valid" class="responses" id="response" name="response" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="type">Type</label>
<div class="col-md-8">
<select id="type" class="form-control valid" required>
<option value="-1">Select an option</option>
<option value="I">Tax</option>
<option value="D">Declaration</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="period">Period</label>
<div class="col-md-8">
<select id="period" class="form-control valid" required>
<option value="-1">Select an option</option>
<option value="01">Monthly</option>
<option value="3">Bi-monthly</option>
<option value="4">Quarterly</option>
<option value="5">Four-Monthly</option>
<option value="6">Semiannual</option>
<option value="7">Annual Legal Entity</option>
<option value="8">Annual Natural Person</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="btnResponse" data-dismiss="modal" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Also try adding this: $ ('body') addClass("."); $ ("#modalResponses") css ("display", "none."); After the ajax function ends, but it's still not working.