In my comments form, I have a tick box field for visitors to agree to the comments policy. To that end, the field has help text which links to said policy.
As I would rather prefer to avoid causing any inconvenience, I thought that the best practice may be to show this node (or preferably only the body, but let's take one step at a time) in a small overlayed window, a la many other websites.
A search found nothing up to date (as ever) but an old article from Befused provided a very simple solution for D8 using attributes. I have D10 in MAMP for testing and D11 for my website, but as some older things still work, I gave this a go and altered my link to the following:
<a class="use-ajax" data-dialog-type="modal" href="/policies">Comments Policy</a>
However, there is no change. Therefore, do I take it that this feature is no longer available in Drupal 10/11? If not, is there an alternative or is this just one of this things which I won't be able to do?
Comments
There's a ton of tooltip
There's a ton of tooltip libraries available and some have projects here. I don't know if they have a modal option, but you probably don't need that.
Available for paid support, module development, migrations, consulting...
?
I was not enquiring about a tooltip.
This page looks like it might
This page looks like it might have some info: https://www.drupal.org/docs/develop/drupal-apis/ajax-api/ajax-dialog-boxes
I just tried this in a Drupal 10 site, and I got a popup, so it seems to work, where
/my-pageneed to exist:<p><a class="use-ajax" data-dialog-type="modal" href="/my-page">Modal</a></p>Check your browser console for any errors (press "F12").
I got as far as the
I got as far as the 'Prerequisites' segment, at which point that document went rather beyond my ken, I'm afraid.
On a general note, I very much wish that the people who write Drupal's (patchy) documentation were aware of the fallacy of knowledge. If so, they would write clearer and more contextually informative documents which make more sense to normal people. I have found the whole process of making my website with Drupal far more frustrating, tiring, and stressful than it needs to be, largely because of the paucity of clear information.
By the way, what does your last sentence mean?
You don't need to read the
You don't need to read the entire page ... Like I wrote, I just tried entering the line I shared, and I got a popup. Sorry the last line was unclear I have added missing bits.
Try creating a fresh
Try creating a fresh installation, add the next line, log in as admin, and verify if it works or not, and take it from there:
<p><a class="use-ajax" data-dialog-type="modal" href="/user/1">Modal</a></p>Add in this file:
web/core/themes/olivero/templates/layout/page.html.twigYou should see this, after you click on the "Modal" link:
I appreciate your help, but I
I appreciate your help, but I had better not try setting up another test site. A lot of work went in to getting it working in MAMP and I'm not confident of being able to repeat that.
What may, I hope, help you to advise me further is that I have just found that the modal works if I'm logged in. I log into my test site in Safari, as MAMP opens it, but I use Firefox (logged out) to test all of my theme/CSS changes, so I had not discovered this discrepancy until, by chance, I tried it a moment ago.
I have looked at the HTML source and there appears to be quite a lot of differences in scripting, though I obviously have no way of knowing whether those differences are solely down to being logged in, as I expect that most of them will be. I can copy them here if it would help.
DDEV is great
You're welcome, but you really ought to do yourself the favour of getting DDEV up and running, so you can create and destroy new Drupal installations, without hesitation.
Otherwise, it may slow down your learning speed, since you will fear that changing something may cause Drupal to break down ... If conversely, you tinker, experiment, fail and start over in DDEV (or Lando), knowing that you can always start over in seconds, you will gain routine and confidence.
Anyway, it doesn't work when we're not logged in, because the path needs to be accessible for the user (See my previous comment: "where
/my-pageneed to exist:"). I used/user/1since that path exists in a fresh install ...But I had a closer look, and it does look like the Ajax JavaScript library is not loaded in Olivero for anonymous users ...
Try this:
/node/1- core/drupal.dialog.ajaxinweb/core/themes/olivero/olivero.info.ymllike this:web/core/themes/olivero/templates/layout/page.html.twig:.jslibraries goes up from ~10 to ~50 in the sourceAnonymous users should now get a popup, when they click on "Modal".
Try changing the link to
/user/login. Anonymous users now get a login modal, pretty cool.EDIT: Or use the link to the search page (accessible to all users) to skip node creation in step #1:
https://www.drupalatyourfingertips.com/modals#no-code-modal-dialogs
... and that's also used in the Befused article linked to in the original post, so now we're full circle :)
Thanks
Yes, Adding that to my theme's info file worked.
Though as you mentioned, it loads an awful lot of scripts. I tried adding it to my comment field template, to make it conditional, and that also worked. If I use this live, I would look for a way to fetch only the necessary scripts and none of the CSS, as the jQuery style is unsightly and the [non-responsive] layout was quite ropey (and added inline!). It ought to be updated to use a native dialog element and anchor positioning with fallback.
Great that you got it working
Great that you got it working. Getting Drupal to do as you want, can be challenging, where you have to try different things, until you finally find a solution.
_-_
_-_