How to have a dialog box displayed automatically when a page is reached without having to click the link?

Question

Using Dialog API and advice from @leymannx, I added this link to a node (node99):

<a class="use-ajax" data-dialog-options="{&quot;width&quot;:600}" data-dialog-type="modal" href="/node/27">Last minute information</a>

and it works fine: when clicked, the dialog box shows up!

Now, I'd like to have the dialog box displayed automatically when the node is reached without having to click the link.
@No Sssweat suggested to make jQuery to click the link for you on page load $(".use-ajax").click();

After some errors ($ is not a function), I finally used this:

(function ($) {
  $('.use-ajax').trigger("click");
})(jQuery);

It works but not as expected: the node 27 (the link has href="/node/27") is displayed instead of node99, not in a modal over node99.
What am I missing?

Answer 1

Your JS needs to be formatted like this:

(function ($, Drupal) {
  Drupal.behaviors.myThemeBehavior = {
    attach: function (context, settings) {
      $('.use-ajax', context).once('auto-open').each(function () {
        $(this).click();
      });
    }
  };
})(jQuery, Drupal);

Your library needs to be defined like this:

example:
  js:
    js/example.js: {}
  dependencies:
    - core/jquery #Just ot be save
    - core/drupal.dialog.ajax #Required for dialogs