Scroll
Drupal 8 Modal form
Drupal 8 Modal form
Drupal 8 Modal form
1 answer
votes: 1376
Answer
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="{"width":600}"
I’m including the HTML entity "
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="{"width":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="{"width":600}" data-dialog-type="modal" href="/node/42">Node 42</a></p>
Example:
https://gist.github.com/edwardchan/2c2d4f8b340f1425a4902c05afa7ecc6