Closing modal dialog posts back/reloads or does not respond to click on”Close” button

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">&times;</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