I recently upgraded from Bootstrap 3 to Bootstrap 4.1
Within my applications, I utilize ajax loaded modals.
In the layout, I have:
<div class="modal fade" id="myModalToFillInfo" tabindex="-1" role="dialog" aria-labelledby="myModalToFillInfoLabel" aria-hidden="true">
</div>
Followed by a button:
<button type="button" class="btn btn-primary" title="User Information" onclick="showUserDetail(@u.Id)" data-toggle="modal" data-target="#myModalToFillInfo">
<i class="fas fa-info" aria-hidden="true"></i>
</button>
And a simple JS function:
showUserDetail = function (id) {
$.get('/Uzivatel/ModalUserInfo/' + id,
function (data) {
$('#myModalToFillInfo').html(data);
});
}
The function loads content like this:
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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 class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
This creates an example modal. The issue is that the close buttons do not work as they did in Bootstrap 3.
If anyone knows how to resolve this, please share your insights.