Modal + anchor

As Whishlist (feat suggestion) also as “I need help” because it seems to be impossible and I’d love to have it : the possibility to launch a Modal with anchors in it.

I think you need to provide more details. Modals already open by ID. Are you meaning by URL parameters?

In which case you need to use javascript.

The idea is :

  1. You click on a link AnchorX
  2. It opens a modal…
  3. directly to its AnchorX

Thus, once the user launches the modal directly to the anchor respective to the li point, he then can - and that is the main point - scrolls in the modal and see others blocs anchors respective to the others li points of the page behind the modal, rather than having plently of modal for each li to open and close. (As it invites user with a spontaneous scroll to see argus of other points…)

As if the li list is the summary of the page in the modal.

I may can add #anchors to the modal links in html source (hope, because nope if javascript), anyway if I can avoid to do this at each update…

Btw, a simple field to add in front of the app, maybe not a lot to code, for a nice feat even surely rarely used…

You need to use JavaScript.

Add an event listener for your link, open the modal, scroll within the modal to the ID.

It’s not a common case.

Also if you want that content to be indexed in a search engine, don’t store it in a modal.

Yes I know, not standard, but not needed…

I’ll find an alternative solution…


That’s actually an excellent idea to do.

CleanShot 2023-09-29 at 16.27.31

1 Like

:clap: :+1:
You did this with Blocs modal or pure css popup (was on this way…) or how ?
In fact, not exactly what I intend : admitting the modal has a limited height and all p texts much longer, when launching the modal, the #Anchors must be properly at the top of the “viewport” of the modal (exactly same as with a body, as eg links in my footer).
Also, scroll ok IN the modal ?

It’s the standard Blocs/Bootstrap modal I used.

To select the paragraph I’ve used the the data-* attribute and a few lines of javascript.
More about the date attribute here:

Data… .js (noob :raised_hand:)… :pensive:
For what i’ve hovered, it seems to be ok with pure css (and no prob with updates).
Noticed in case, thank you.