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.
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>
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!
Are you setting up a payroll system for your eCommerce startup? Ensuring compliance with myriad…
In the expansive universe of Laravel development, Blade serves as the stellar templating engine, propelling…
Hello Magento Friends, In this blog, we will discuss about adding quantity increment and decrement…
In this guide, we'll explore how to integrate ChatGPT, an AI-powered chatbot, with a Laravel…
In the world of business, understanding financial metrics is crucial for making informed decisions and…
Welcome to the MageComp Monthly Digest, where we bring you the latest updates, releases, and…