Problem/Motivation

First off, thank you for your work on the module — it provides a clean and powerful way to implement modal dialogs in Drupal.

I’d like to suggest a feature enhancement: support for Bootstrap’s toast component as a less-intrusive alternative to modals.

While modals are ideal for blocking interactions and demanding user input (e.g., confirmations, form inputs), Bootstrap toasts offer a UI pattern suitable for:

  • Status updates (e.g., "Saved successfully")
  • Informational messages
  • Passive alerts that do not interrupt workflow

Benefits

  • Reduces need for separate modules or custom code to implement toasts
  • Makes the module more versatile without breaking existing functionality
  • Improves UX by allowing site builders/webmasters to choose the right level of intrusiveness per interaction

Proposed resolution

Extend the existing modal configuration entities with a display mode option, allowing users to choose between:

  1. Modal (current behavior)
  2. Toast (a new, less-intrusive alternative using Bootstrap’s toast component)

Add a display_mode field to modal configuration entities (modal, toast)
Adjust the controller logic and frontend rendering to branch based on this value
For toast mode, generate appropriate Bootstrap toast markup and trigger display via JS

This would allow the same configuration system to power both modal and toast presentations, depending on the use case.

I’d be happy to help prototype or contribute to such a feature if there’s interest.

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#27 modal_page-3535144-26.patch84.1 KBdonquixote
#21 3535144-21.patch244.11 KBkeszthelyi

Issue fork modal_page-3535144

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

keszthelyi created an issue. See original summary.

renatog’s picture

renatog commented

Hey @keszthelyi, thank you so much for reporting that

First off, thank you for your work on the module — it provides a clean and powerful way to implement modal dialogs in Drupal

Really appreciate your feedback. It encourages the continuation of the project

I’d like to suggest a feature enhancement: support for Bootstrap’s toast component as a less-intrusive alternative to modals

That really makes sense. I really liked this feature request!

Extend the existing modal configuration entities with a display mode option, allowing users to choose between:

  1. Modal (current behavior)
  2. Toast (a new, less-intrusive alternative using Bootstrap’s toast component)

This proposed resolution approach seems good to me

I’d be happy to help prototype or contribute to such a feature if there’s interest

If possible, that would be very helpful

As a Maintainer I'm very committed to move forward and commit this

keszthelyi’s picture

keszthelyi commented

Hi @renatog,

Thank you for the feedback, I'm glad you like the idea! I will start working on an implementation here that we can discuss when ready.

keszthelyi opened merge request !53

keszthelyi’s picture

keszthelyi commented

Hi @renatog,

I opened an MR with the feature. I did some changes that are not directly related to the feature (fixing tests and some issues that I found during development, general code improvements, and some of the changes were needed to be able to implement the new template and make it work with the js).

So this might look a bit too much at first, but I tried to document the changes in the commit messages. The actual toast feature is added in my last commit. Let me know what do you think about this approach.

renatog’s picture

renatog commented
Status: Active » Needs review

Great! It's so nice!

Marking as NR, so I'll test that and share my thoughts

Thank you so much for you effort and contribution on this @keszthelyi

aaron gil martinez’s picture

aaron gil martinez commented

Hi, I think the feature is interesting, I've reviewing the code/functionalty on my local, added some observations, questions and small things to improve in the MR. Can you have a look @keszthelyi, please?

I'm keen to help with this contribution, if there is anything I can help with just tell me @renatog.

Thanks both!

keszthelyi’s picture

keszthelyi commented

Hi @aaron gil martinez,

Thanks for the review, pushed the fixes and added some replies. Please check.

renatog’s picture

renatog commented

Thank you so much for your contribution @aaron-gil-martinez

if there is anything I can help with just tell me

If possible to verify the updates made by @keszthelyi will be much appreciated

I'm planning to merge that as soon as possible

aaron gil martinez’s picture

aaron gil martinez commented

Looks good to me, thanks @keszthelyi!

+1

Ready for you @renatog

renatog’s picture

renatog commented
Status: Needs review » Reviewed & tested by the community

Thank you so much! Marking as RTBC

renatog’s picture

renatog commented
Parent issue: » #3553252: Plan for the next Modal Releases
keszthelyi’s picture

keszthelyi commented

Rebased, and added (cherry-picked) gitlab-ci to run the tests in the pipeline.

The first (Fix PHPUnit errors.) and last (Add .gitlab-ci.yml) commits should be removed from here before merging as they are planned to be merged in https://www.drupal.org/project/modal_page/issues/3392290

keszthelyi’s picture

keszthelyi commented
Assigned: Unassigned » keszthelyi
Status: Reviewed & tested by the community » Needs work

I found a caching issue with toast position setting, started working on it.

keszthelyi’s picture

keszthelyi commented

I modified the test to check with anonymous user when the toast position config is changed to demonstrate the caching issue in: defb30bf - "Modify modal entity test to demonstrate toast position cache issue."

The phpunit test failed as expected in pipeline: https://git.drupalcode.org/issue/modal_page-3535144/-/pipelines/668530

1) Drupal\Tests\modal_page\FunctionalJavascript\ModalEntityTest::testModal
Behat\Mink\Exception\ExpectationException: An element matching css ".toast-container.bottom-0.end-0" appears on this page, but it should not.

keszthelyi’s picture

keszthelyi commented

Pipeline is green again (phpunit fixed) after pushing the fix in: 2acb3c69 - "Merge module settings cache tags with modal config cache tags in preprocess."

@aaron gil martinez, @renatog:

I put it back to Needs review, please have a look at the changes in last 3 commits when you have time.

keszthelyi’s picture

keszthelyi commented
Status: Needs work » Needs review
renatog’s picture

renatog commented

Awesome! Thank you so much @keszthelyi

Which of these two do you suggest merging first?

keszthelyi’s picture

keszthelyi commented

Hi @renatog,

I think the most important would be to first merge this: #3392290: Implement GitLab CI to validade PHPCS automatically. At least on branch 6.0.x. I am using (cherry-picking) the 2 commits from there in the active MRs so that pipeline is running on these and PHPUnit is fixed. If that's merged first, I could rebase (and remove the cherry picked commits) from these other MRs (because they are not really part of those MRs).

Other than that, it's not that important which of those 2 gets merged first IMO.

renatog’s picture

renatog commented

Deal

I added that on #3553252: Plan for the next Modal Releases

keszthelyi’s picture

keszthelyi commented
StatusFileSize
new 3535144-21.patch244.11 KB

Uploading a patch file for the current MR state (our CI requires static patch files to be used).

aaron gil martinez’s picture

aaron gil martinez commented

Added a small remark, the test covers the issue with cache, and the other changes look fine to me.

Can you check @keszthelyi please?

renatog’s picture

renatog commented
Assigned: keszthelyi » Unassigned
Status: Needs review » Needs work

I've been testing and It's amazing!

feedback; the "Toast Position" could be configured at "Modal level" instead of "Global Settings"

Explanation

  • In the MR the "Extra" group, has "Display as Toast" (it's awesome)
  • However the "Toast Position" is at "Global Settings"
  • /admin/config/user-interface/modal-page/settings
  • My suggestion is to add the "Toast Position" in the "Modal level" right after the "Display as Toast"
  • We can use #states to appears dynamically
  • Like; the "Toast Position" is hidden by default
  • If user marks the "Display as Toast", so the "Toast Position" appears

It'll be more flexible, because editors can create one in the "top-left" but in another page have another one in the "top-right" for example

Is that makes sense?

keszthelyi’s picture

keszthelyi commented

Hi @renatog,

feedback; the "Toast Position" could be configured at "Modal level" instead of "Global Settings"

Putting the toast position to global config was intentional, because another use-case/pattern that should be considered is stacking multiple toasts displayed on the same page. https://getbootstrap.com/docs/5.0/components/toasts/#stacking

The current implementation makes that possible out of the box without special attention in the modal config. Defining a site wide toast position - consistently placing this component in the same position on every page is also good UX practice in general IMO.

Technically, it would be possible to insert multiple toast containers on the same page (and add the positioning classes to each container separately). This would make it possible to display toasts in different positions even on the same page (although not sure about if this is a good UX practice).

If we decide to support positioning per toast (or modal entity config), I think we should still consider keeping the current global config as a default feature. The per toast positioning option would only override the global config in this case, so if it's used/set we would change the output for that specific modal/toast that is overriding it. Like this, we would keep the stacking feature and what I think is a good default for most use cases. What do you think?

keszthelyi’s picture

keszthelyi commented

Rebased to receive fixed module dependencies and removed 'filter' dependency from ModalEntityTest.

donquixote made their first commit to this issue’s fork.

donquixote’s picture

donquixote commented
StatusFileSize
new modal_page-3535144-26.patch84.1 KB

Rebased again.
@keszthelyi if you could review if you agree with my conflict resolutions.
(I used phpstorm magic wand button)
The main conflicts were with #3559547: YouTube video keeps playing after closing modal in js/modal-page.js.

renatog’s picture

renatog commented
Status: Needs work » Needs review

Thanks for rebasing @donquixote

Added this issue in the next one at #3553252: Plan for the next Modal Releases

Just to help us and avoid rebasing multiple times

renatog’s picture

renatog commented
Status: Needs review » Fixed

Merged into dev branch (6.0.x)

The toast implementation is amazing

Honestly I didn't agree with few improvements in the MR that wasn't directly related to toast feature

It's definitely valid, however wasn't a dependency for the toast logic

On that cases, I prefer creating a MR for "Toast" and a separated issue to handle different improvements

On this MR was everything together, which was harder to review everything and I wasn't 100% secure, but I decided to merge because:

  1. Worked fine on my local
  2. It's a beta version with experimental features, so is the correct place to test this kind of stuffs

Thank you so much for your great contribution on this milestone

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

renatog’s picture

renatog commented

Added the credits in the contribution record and released the new version with public thanks for you guys for your awesome contribution on this Milestone!

https://www.drupal.org/project/modal_page/releases/6.0.0-beta12

Thanks a lot

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.