Django中Tailwind/Flowbite登录模态框被遮罩层遮挡求助

问题核心 #

登录模态框无法正常交互，注册模态框结构完全一致（仅修改ID）却能完美运行。浏览器检查显示遮罩层z-index为40，登录模态框z-index为50，但点击登录框时完全无响应，像是被遮罩层挡住。

登录模态框代码 #

<div id="login_modal" data-modal-backdrop="static" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-md max-h-full">
      <!-- Modal content -->
      <div class="relative bg-darkred rounded-lg shadow">
          <button id="close-login_modal" type="button" class="absolute top-3 right-2.5 text-palettewhite hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="login_modal">
              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
              </svg>
              <span class="sr-only">Close modal</span>
          </button>
          <div class="px-6 py-6 lg:px-8">
              <h3 class="mb-4 text-xl font-medium text-palettewhite">Login to our platform</h3>
              <form class="space-y-6" action="{% url 'home' %}" method="POST">
                {% csrf_token %}
                    <div>
                        <label for="username" class="block mb-2 text-sm font-medium text-palettewhite">Email address</label>
                        <div class="mt-1">
                            <input id="username" name="username" type="text" required class="bg-palettewhite border border-paletteblue text-paletteblack text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="">
                        </div>
                        <small class="text-palettewhite">{{ form.username.help_text }}</small>
                    </div>
                    <div>
                        <label for="password" class="block mb-2 text-sm font-medium text-palettewhite">Password</label>
                        <div class="mt-1">
                            <input id="password1" name="password1" type="password" required class="bg-palettewhite border border-paletteblue text-paletteblack text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="********">
                        </div>
                        <small class="text-palettewhite">{{ form.password.help_text }}</small>
                    </div>

                <button type="submit" name="login_form-submit" class="w-full text-palettewhite bg-patternred font-medium rounded-lg text-sm px-5 py-2.5">Create your account</button>
              </form>
          </div>
      </div>
    </div>
</div> 

自定义控制脚本 #

const openLoginModalButton = document.getElementById('open-login_modal');
const closeLoginModalButton = document.getElementById('close-login_modal');
const loginModal = document.getElementById('login_modal');

openLoginModalButton.addEventListener('click', () => {
    loginModal.classList.remove('hidden');
});

closeLoginModalButton.addEventListener('click', () => {
    loginModal.classList.add('hidden');
});

导航栏触发按钮代码 #

<li class="inline mr-10">
    <button data-modal-target="login_modal" data-modal-toggle="login_modal" id="open-login_modal" class="inline-flex text-palettewhite no-underline hover:border-b-[2px] border-red-600">Login</button>
    {% include 'pages/login_modal.html' %}
</li>
<li class="inline">
    <button data-modal-target="signup_modal" data-modal-toggle="signup_modal" id="open-signup_modal" class="inline-flex shadow-sm border px-3 py-2 rounded-lg border-logored font-semibold text-palettewhite hover:bg-logored">Sign up</button>
</li>

补充细节 #

• 注册模态框仅在homepage.html的Hero区域引入时正常，若移到base.html或同时在两处引入就失效
• 已查阅Flowbite Django文档，配置无问题
• 需要导航栏在所有页面显示，但登录模态框的引入位置（base.html导航栏<li>内）疑似导致交互失效

求解决方案，谢谢！

内容的提问来源于stack exchange，提问作者framartino