Modal window not interactive due to overlay issue

[860000023]

`{% extends 'admin/change_list.html' %}

{% block content %}

Add Register Card

Add Register Card

×

This is the content for adding a register card.

Close Save Card

<script> document.addEventListener("DOMContentLoaded", function() { // Bind click event to "Add Register Card" button document.querySelector('a[data-target="#addCardModal"]').addEventListener("click", function() { console.log("Button clicked successfully, preparing to open modal"); $('#addCardModal').modal('show'); // Manually trigger modal to show }); }); </script>

{% endblock %}
`

When clicking the "Add Register Card" button, the modal window appears but becomes unclickable and unresponsive. The modal content is displayed, but it is overlaid by a transparent layer, which prevents interaction with the modal itself (such as clicking buttons or entering data). This issue seems to be related to the z-index or overlay management.

Steps to reproduce:

Navigate to the "Register Card" page.

Click the "Add Register Card" button.

The modal window appears but cannot be interacted with due to the overlay blocking interactions.

Expected behavior:
The modal should appear as expected, with the ability to click buttons and interact with the input fields.

Current behavior:
The modal window appears, but it is unresponsive and blocked by an overlay, preventing interaction.

Additional Information:
I've already added custom styles to adjust z-index, but the issue persists. It appears that the modal is being covered by a background layer or other elements.