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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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!
