Magento 2 Popup Modal Window

Magento 2 makes some things much easier that Magento 1, especially UI elements like tooltips and popups.

No need to add css/js files to your code base, as they are already part of Magento 2.

This makes adding UI elemets as simple as adding a few lines of code to your template and then adding some css rules in your custom custom.less file.

Since we are using a youtube video, which is inside of an iframe, we’ll also include some css rules to make sure it’s responsive.
Without the additional videoWrapper and css rules, the iframe will be a fixed width and height.

End result of html and additional css is a fully responsive popup in the header area, which scales based on viewport size.

You can view the code used to create this popup here- Modal Popup (204)

This entry was posted in Magento, Magento 2. Bookmark the permalink.