Magento 2: How to Open Popup on Button Click in Admin

Hello Magento Friends,

In today’s blog, I will explain How to Open Popup on the Button Click in Magento 2 Admin.

Magento 2, the popular e-commerce platform, provides extensive customization capabilities for both the front end and back end. One such requirement might be the need to open a popup window in the admin panel upon clicking a button, enabling the display of additional information or performing specific actions without navigating to a different page. In this article, we’ll explore how to achieve this functionality in the Magento 2 admin panel.

Steps to Open Popup on Button Click in Magento 2 Admin:

Step 1: First, we need to create a system.xml file inside our extension at the following path

app\code\Vendor\Extension\etc\adminhtml\system.xml

Then add the code as follows

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Magento/Backend/etc/system_file.xsd">
    <system>
        <section id="customsection" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Custom Popup</label>
            <resource>Vendor_Extension::custom_config</resource>
            <group id="general" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <field id="sents" translate="label" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>CustomPopup</label>
                    <frontend_model>Vendor\Extension\Block\Adminhtml\System\Config\Custompopup</frontend_model>
                </field>
            </group>
        </section>
    </system>
</config>

Step 2: After that, we need to create a Custompopup.php file inside our extension at the following path

app\code\Vendor\Extension\Block\Adminhtml\System\Config\Custompopup.php

And add the code as given below

<?php

namespace Vendor\Extension\Block\Adminhtml\System\Config;

class Custompopup extends \Magento\Config\Block\System\Config\Form\Field
{
    protected $_template = 'system/config/custompopupbutton.phtml';

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
        return parent::render($element);
    }

    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        return $this->_toHtml();
    }

    public function getButtonHtml()
    {
        $button = $this->getLayout()->createBlock(
            'Magento\Backend\Block\Widget\Button'
        )->setData(
            [
                'id' => 'custompopupbutton',
                'label' => __('Custom Popup'),
                'class' => 'primary'
            ]
        );

        return $button->toHtml();
    }
}

Step 3: After that, we need to create a downloadlinkbutton.phtml file inside our extension at the following path.

app\code\Vendor\Extension\view\adminhtml\system\config\downloadlinkbutton.phtml

Then add the below-mentioned code

<div id="messages">
       <div class="message"> MessageContents 
           <button class="primary">ClickMe</button>
       </div>
</div>
<script type="text/javascript">// <![CDATA[
require([
        'jquery',
        'Magento_Ui/js/modal/alert'
    ],
    function($, alert) {
       $('#messages').on('click', 'button.primary', function(event){
            alert({
               content: $(event.target).parent().text()
            })
       })
    }
);
// ]]></script>
</div>

Conclusion:

Integrating a popup window in the Magento 2 admin panel can significantly enhance user interaction and streamline administrative tasks. By following the steps outlined in this article, you can effectively open a popup window on a button click, allowing you to display relevant information or perform specific actions without navigating to a different page. Leveraging this functionality can contribute to a more efficient and user-friendly Magento 2 admin panel experience.

If you find it difficult to perform these steps, Magento 2 experienced developers can help you with that.

Happy Coding!