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

Hello Magento Friends,

Today, in this blog, I will be discussing the concept of how to open a popup window on the button click in Magento 2 Admin.

Magento 2 is one of the most popular e-commerce platforms and provides powerful customization abilities, both on the frontend and backend. One such requirement might be when a popup window opens in the admin panel when a button is clicked, with the purpose of displaying further information or facilitating certain actions without redirecting the user to another page.

This article discusses how you can enable it 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:

Add a popup window in the Magento 2-admin panel, that improves the interaction of the user and decreases the tasks workload. According to this article, you will easily open a popup window after clicking on a button and, in this way, display appropriate information or execute some action without moving to another page. It increases the effectiveness and friendliness of the Magento 2 admin panel.

If you cannot perform these steps, Magento 2 experienced developers can do it for you.

Happy Coding!