Steps to create Drupal 8/9 modals along with twig implementation

Drupal modal is a simple functionality of popup and it can hold any type of data. In this blog, we are going to learn about creating drupal 8/9 modals with al the available options.

We can have any type of information in the modal. For example, drupal modal data could be a simple welcoming pop-up message and form inputs, and also we can have an entire node on a popup with teaser inputs and many methods. Here are the simple steps to achieve the functionality.

We can create the drupal dialog boxes in two methods one is with a custom block and the other is rendering through the twig template.

 Drupal modal with custom block

Here I have given clear steps to construct the drupal modal using a custom block with a few examples.

Example: Search form in drupal modal

In this example, I’m going to explain how to create the drupal modal of search form data in it. 

Step-1: Add a custom block

In your Drupal site go to the custom block library and add a custom block with any name related to the modal.

Step-2: Give the source code

In your block settings change a text format to FULL HTML and click on the source code after that remove any unwanted code in the field after that add the below code in the body field.

Syntax:

<div><a href=”/search/node” data-dialog-type=”modal” class=”use-ajax”>Search here</a></div>

Step -3: Place the custom block

Go to block layout and place the custom block in any region you want to. In this example, I place the block in the sidebar second. And now you hit back to your site you will see the search link in the sidebar second. 

Final results

Go ahead and click the search link you can see the modal as shown in the below screenshot.

Example: A node can also be a Drupal modal

Step:1: Create the node

Step-2: Give the node path in modal href

We can also place the node in modal, by giving the node path in dialog href. Edit the custom block and add the below code in the body field.

<p><a href=”/node/20” data-dialog-type=”modal” class=”use-ajax”>Node 20</a></p>

Step-3: Final results

Step-4: Customize the dialog width and height

We can adjust the modal width and height with data-dialog options check the below code to do custom properties for drupal dialogs.

<p><a href=”/node/3” data-dialog-type=”modal” class=”use-ajax” data-dialog-option={&quot;width&quot;:800, &quot;height&quot;:500}}>Node 3</a></p>

This will change the width and height of the dialog as shown in the following screenshot.

This is a simple example for changing the width and height of the dialog, to get more details of custom properties of the dialog, go for the below blog - responsive drupal modal blog

Example 3: Rendering Drupal modal in twig

Another method of creating a drupal modal is rendering through twig templates. It is as simple as adding the required class and path of the particular node or block. Place the below code in your twig template which gives the same result.

example.html.twig

<div class="main-inner">
    <div class="layout-content">
       <a class="use-ajax" id="modal-popup-scroll" data-dialog-options="{&quot;width&quot;:488}" data-dialog-type="modal" href="/search/node">Search</a>
    </div>
</div>

The code is coming from the page.html.twig template you can see the below screenshot.

After clicking the search link the popup will appear.

Conclusion

With these simple steps, you have successfully created the modal in drupal 8/9. Hope you learned something new from this blog. Thank you so much for reading.