Overlay on top of the modal when it is opened for the first time

I'm experiencing this issue as well. When I open the modal the first time, the background is atop the modal and nothing is clickable, you have to press ESC to dismiss the dialog. Clicking the link again to trigger the modal dialog the z-index's are now set as expected and everything looks normal.

However, I am not using Bootstrap at all, so I think this is a Drupal core bug.

I got this working. I had to attach the core/drupal.dialog.ajax library to the Twig template with the AJAX modal link.

{{ attach_library('core/drupal.dialog.ajax') }}

After I added that, the modal rendered as expected every time.

Hello @cprietom

Please try this, the dialog should be open on the page.

<a class="btn btn-info use-ajax" data-dialog-options="{&quot;width&quot;:400}" data-dialog-type="modal" href="/node/13">Open modal</a>

First of all, You can load dependencies of dialog in your themes libraries.yml or custom module libraries.yml such as:

my-module/my-module.libraries.yml
my_theme/my_theme.libraries.yml

my_library:
    css:
        theme: css/example.css {}
    js:
        js/example.js: {}
    dependencies:
        - core/drupal.dialog.ajax

Now the libraries are loaded on the page. Now you can attach your library to your specific page using the

{{ attach_library(my_module/my_library’) }}

or if you want to display it on all the pages then include your library name in the .info.yml file such as:

my-module/my-module.info.yml
my_theme/my_theme.info.yml

Modules

libraries:
  - my-module/my_library

Themes

libraries:
  - my_theme/my_library

Hi,

I have fixed this modal popup issue and committed the changes.
Please review and merge this MR.

I have checked the MR !19 (https://git.drupalcode.org/issue/bootstrap-3282241/-/tree/3282241-bootst...)
After I added that, the modal rendered as expected every time. Please check the Testing images.

Before:

After:

This change starting throwing Javascript errors on my site which in turn broke the antibot module which relies on Javascript working.

I've uploaded the errors I'm getting incase others have the same issues. Needed to roll back to 3.25 for now.