Graphical representation
2016 02 Apr

Popups in Drupal 8? No problem!

Drupal 8 is here and everyone is excited about it. There are too many features and add-ons to explore. However, this one focusses only on overlay/popup i.e. provide a simple and easy implementation. With this blog, I aim to explain the basic implementation of how to create a popup of your own.

Before learning to implement popup, let us briefly go through the Drupal 8 routing system.

If you already know about the routing system, you can skip this section and if you don't I assume you still know at least the basics of Drupal 8. I have a page which has a table display of some data. On top of this page, I'll provide a link which will open a form in a popup.

Now, let's start with the steps.

At first, we create a routing link where we show a table with some content.


hollywood.view_movie:
    path: '/movies-list'
    defaults:
        _title: 'Movie List'
        _controller: '\Drupal\hollywood\Controller\MovieList::overview'
    requirements:
        _permission: 'movies list'

I am using the below code to render this table.   


$content['movie_list'] = array(
     '#type' => 'table',
     '#header' => $this->header(),
     '#title' => $this->t('Movie List'),
     '#rows' => $this->row(),
);

 

Now let us see how we display the link at the top of the table which says "Add Movie".
I am using the following code to show the above link and its overlay.


$content['overlay_link'] = array(
    '#type' => 'link',
    '#title' => $this->t('Add movie'),
    '#url' => Url::fromRoute('node.add', ['node_type' => 'content_type_movie']),
    '#attributes' => [
        'class' => ['use-ajax'],
        'data-dialog-type' => 'modal',
        'data-dialog-options' => Json::encode([
            'width' => 700,
        ]),
    ],
);

This code is self-explanatory but let me explain to you one by one, we ask Drupal to create a link using '#type' => 'link', with the title “Add movie” defined by #title, #url defining the href attribute of the tag and, #attributes adds an attribute to the tag.     


'#attributes' => [
    'class' => ['use-ajax'],
    'data-dialog-type' => 'modal',
    'data-dialog-options' => Json::encode([
        'width' => 700,
    ]),
],

These above attributes will make the content of the link in an overlay, without these attributes, this will be a simple link.

And there you go. It is as simple as that. No more dependencies on multiple modal and popup modules. Now you just need to be right in your syntax and understand the attributes well enough to create a popup link in no time.
There are a lot of other things that can be done around the popups and I'll continue to explain them in further blogs. Look forward to your thoughts and feedback.

Latest Blogs

How to Choose Web Development Agencies

Points to check before choosing the right website development company

In today’s day and age, where the digital population is increasing exponentially, no credible business can or should refrain from having a strong and steady web presence.

Read More

Wordpress to Drupal

Should I plan to move my Wordpress Website into the Latest Drupal version?

If you're here, I assume you already have a website built on WordPress but you're not satisfied with it, or perhaps you're here to have a clear idea about why you should give a thought to migrating

Read More

Drupal 9 Easy Upgrade

Why is Drupal 9 going to be an easy upgrade compared to the previous major versions?

Lately, there has been a lot of buzz around the corner about Drupal 9. The Drupal community is launching Drupal 9, and as well as have plans for the EOL of Drupal 7 and Drupal 8 by 2021.

Read More

Main-Image-SDLC

Understanding The Software Development Life Cycle (SDLC)

The first question to be asked, should be, “What is The Software Development Life Cycle?”

Read More