I have an ASP.NET CORE MVC based app. I am having a strange behavior when trying to show a modal popup with JQuery.
I have following div:
<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" id="form-modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
I have a button to show this div modal popup. When I click the button Javascript adds «in» to class so it becomes class="modal fade in", normally it should add «show». As a result the modal is not showing. So in the browser I enter dev mode and removed «in» and added «show» and it worked.
But I am wondering why my JQuery is adding «in» instead of «show».
Here is my JQuery:
jQueryModalGet = (url, title) => {
try {
$.ajax({
type: 'GET',
url: url,
contentType: false,
processData: false,
success: function (res) {
$('#form-modal .modal-body').html(res.html);
$('#form-modal .modal-title').html(title);
$('#form-modal').modal('show');
console.log(res);
},
error: function (err) {
console.log(err)
}
})
return false;
} catch (ex) {
console.log(ex)
}
}
Any idea ?
Finally, I solved the issue.
For some strange reason I included two different versions of Bootstrap and JQuery at the same time so the conflict was happening in the modal show process.
I had:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
After removing:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
And using only the local binded libs I resolved it!
Now it works like a charm.