Հայոց Русский

Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll
  1. Home
  2. Forums
  3. Drupal CMS
  4. Module Development

Drupal 8 Modal form

22/02/2025, by Anonymous (not verified)
Forums
Module Development

Submitted by Ivan on Sat, 22/02/2025 - 18:49

Permalink

In the body of the block, add the following snippet:

<p><a class="use-ajax" data-dialog-type="modal" href="/search/node">Search</a></p>

Adjusting the width

You can adjust the width by adding the data-dialog-options attribute:

data-dialog-options="{&quot;width&quot;:600}"

I’m including the HTML entity &quot; because that will end up being a quote mark in the rendered HTML.

The full snippet with a width of 600 pixels is:

<p><a class="use-ajax" data-dialog-options="{&quot;width&quot;:600}" data-dialog-type="modal" href="/search/node">Search</a></p>

Wrapping up

You can use this method to display any valid Drupal path in a modal. For example, if you want to show a node in a modal, change the href to the path for the node.

<p><a class="use-ajax" data-dialog-options="{&quot;width&quot;:600}" data-dialog-type="modal" href="/node/42">Node 42</a></p>

Example:

https://gist.github.com/edwardchan/2c2d4f8b340f1425a4902c05afa7ecc6