'Page background removes when modal (with ajax called data) open

I am using Bootstrap v4 and have a strange issue.
See the gray background

Problem comes when I open a modal with ajax called contents such as search results or any other ajax.
Immediately after opening modal, background of the page removes automatically.
No background

When I close the modal, background remains blank.
Following is the code of the modal.

    <div class="modal" id="paymentData" tabindex="-1" role="dialog" aria-labelledby="paymentData" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-search">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <div class="modal-body">
                <div class="fetched-data"></div>
            </div>
        </div>
    </div>
</div>

This happens only when I open modals with ajax called data.

-- I noticed when I open the modal almost all the styles remove from the page. Even the styles of the navigation bar.

jqueryajaxbootstrap-4


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions