I have a simple modal dialog and in content section there is a jQuery data table that I setup dynamically, through Ajaz calls, (set up table columns, data rows, etc,) so I can re-use the same modal with different data sets.
Everything works fine except the "Close" button. I either get no response (modal does not close and disappear) or it closes and does a postback (reloads the page).
I have tried everything suggested when i searched for this issue.
When I use type="button" it does not close, when I remove it, it closes but does a postback.
I must mention that I have a tab panel and this is from second tab. When it reloadsthe page, it fetches data for first tab and goes to first tab.
<div class="modal fade" id="dataModal" role="dialog" aria-labelledby="errModalLabel" aria-hidden="true">
<div class="modal-dialog in" style="width:100%; max-width:900px;margin-top:150px">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<asp:Label ID="lbldataModalTitle" runat="server" Text=""></asp:Label></h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="table-responsive">
<table id="detailTable" class="table table-striped table-bordered table-hover display responsive compact divGrid" style="width: 98%;">
<thead class="fixed-thead bg-body-tertiary">
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-info" type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close">Close</button>
</div>
</div>
</div>
</div>
I have in script section:
$('#dataModal').on('show.bs.modal', function (event) {
// id of the modal with event
//var button = $(event.relatedTarget) // Button that triggered the modal
//var orgID = button.data('orgID') // Extract info from data-* attributes
//var orgName = button.data('orgName')
var modal = $(this)
var title = modal.data('title');
var content = modal.data('content');
var msg = modal.data('msg');
if (msg != null && msg != '')
content += "<br />Error: " + msg;
// Update the modal's content.
modal.find('.modal-title').text(title)
modal.find('.modal-body').html(content)
});
and where I open it, after fetching data from Ajax call:
function populateTable(resultData) {
if ($.fn.DataTable.isDataTable('#detailTable')) {
tblDetails.search("").draw();
tblDetails.clear().draw();
tblDetails.rows.add(resultData).draw();
tblDetails.columns.adjust();
$("#dataModal").data("title", "Request Status");
$("#dataModal").data("content", tblDetails);
$("#dataModal").attr("data-msg", '');
$('#dataModal').modal({ backdrop: 'static', keyboard: false });
$('#dataModal').modal('show');
}
}
I tried:
$(function () {
$('#dataModal').modal('toggle');
});
Pops up immediately without my permission(!)and with no data in data table. However, when I click on a link that populates data table and shows modal, it opens with data properly displayed. In either case, it closes only when clicked outside modal.
None of these work when type="button" is used:
$(function () {
$('#btnClose').on("click", () => {
$('#dataModal').modal('hide');
});
});
$(document).ready(function () {
$('#btnClose').on("click", () => {
//$(".modal.fade.in");
});
$(document).ready(function () {
$('#btnClose').on("click", () => {
$('#dataModal').modal({ backdrop: 'static', keyboard: false });
$('#dataModal').modal('hide');
});
With type="button" removed:
$(function () {
$('#dataModal').modal('toggle');
});
Behaves as above.
$(function () {
$('#btnClose').on("click", () => {
$('#dataModal').modal('hide');
});
});
$(document).ready(function () {
$('#btnClose').on("click", () => {
$(".modal.fade.in");
});
None of the above respond to click on "Close" button:
Not sure what else to try. This could be a BS 5.3 issue because I have other projects with BS4 and they works as expected. I just can’t see why the page reload or non-responsiveness.
Another peculiar thing I noticed is that .on(‘show.bs.modal’ gets called before modal(‘show’) is called, which is where all bs-data-xxx are set.
You need to sign in to view this answers