{"id":1227,"date":"2024-03-06T18:57:40","date_gmt":"2024-03-06T13:27:40","guid":{"rendered":"https:\/\/magecurious.com\/blog\/?p=1227"},"modified":"2024-11-18T01:15:40","modified_gmt":"2024-11-17T19:45:40","slug":"how-to-open-popup-on-button-click-system-configuration-field-in-magento-2","status":"publish","type":"post","link":"https:\/\/magecurious.com\/blog\/how-to-open-popup-on-button-click-system-configuration-field-in-magento-2\/","title":{"rendered":"How To Open Popup On Button Click System Configuration Field In Magento 2"},"content":{"rendered":"\n

Hello Everyone,<\/p>\n\n\n\n

In this blog, we will learn about how to open Popup on Button Click in System Configuration in Magento 2.<\/p>\n\n\n\n

Magento 2 provides more customization options, one is open popup on button click of System Configuration field.<\/p>\n\n\n\n

Without wasting your time, let us guide you straight away. Follow the easy step given below to Open Popup on Button Click in Magento 2.<\/p>\n\n\n\n

STEPS FOR OPEN POPUP ON BUTTON CLICK IN ADMIN IN MAGENTO 2<\/strong><\/h2>\n\n\n\n

Step 1: Create system.xml file<\/strong><\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/etc\/adminhtml\/system.xml<\/strong><\/p>\n\n\n

\n<?xml version="1.0"?>\n\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc\/system_file.xsd">\n\n\u00a0\u00a0\u00a0\u00a0<system>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tab id="magecurious" class="magecurious" translate="label" sortOrder="10">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>Magecurious<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tab>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<section id="extension" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<class>separator-top<\/class>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>Magecurious<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tab>magecurious<\/tab>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<resource>Vendor_Extension::config_extension<\/resource>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<group id="general" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>General Configuration<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<field id="enable" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>Enable Extension<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<source_model>Magento\\Config\\Model\\Config\\Source\\Enabledisable<\/source_model>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/field>\n\n<field id="clickpopup" translate="label" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>Click Button Popup<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<frontend_model>Vendor\\Extension\\Block\\Adminhtml\\System\\Config\\Popup<\/frontend_model>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/field>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/group>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/section>\n\n\u00a0\u00a0\u00a0\u00a0<\/system>\n\n<\/config>\n<\/pre><\/div>\n\n\n
Step 2: Create Popup.php file<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/Block\/Adminhtml\/System\/Config\/Popup.php<\/strong><\/p>\n\n\n
\n<?php\n\nnamespace Vendor\\Extension\\Block\\Adminhtml\\System\\Config;\n\nclass Popup extends \\Magento\\Config\\Block\\System\\Config\\Form\\Field\n\n{\n\n\u00a0\u00a0\u00a0\u00a0protected $_template = 'system\/config\/popupbutton.phtml';\n\n\u00a0\u00a0\u00a0\u00a0public function __construct(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\\Magento\\Backend\\Block\\Template\\Context $context,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array $data = []\n\n\u00a0\u00a0\u00a0\u00a0) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0parent::__construct($context, $data);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0public function render(\\Magento\\Framework\\Data\\Form\\Element\\AbstractElement $element)\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return parent::render($element);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0protected function _getElementHtml(\\Magento\\Framework\\Data\\Form\\Element\\AbstractElement $element)\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $this->_toHtml();\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0public function getButtonHtml()\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$button = $this->getLayout()->createBlock(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'Magento\\Backend\\Block\\Widget\\Button'\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)->setData(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'id' => 'popupbutton',\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label' => __('Magecurious Popup'),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'class' => 'primary'\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $button->toHtml();\n\n\u00a0\u00a0\u00a0\u00a0}\n\n}\n<\/pre><\/div>\n\n\n
Step 3: Create pop up button.phtml file<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/view\/adminhtml\/system\/config\/popupbutton.phtml<\/strong><\/p>\n\n\n
\n<div id="messages">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class="message"> MessageContents\u00a0\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button class="primary">Click Me<\/button>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n<\/div>\n\n<script type="text\/javascript">\/\/ <![CDATA[\n\nrequire([\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'jquery',\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'Magento_Ui\/js\/modal\/alert'\n\n\u00a0\u00a0\u00a0\u00a0],\n\n\u00a0\u00a0\u00a0\u00a0function($, alert) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#messages').on('click', 'button.primary', function(event){\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0content: $(event.target).parent().text()\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\n\u00a0\u00a0\u00a0\u00a0}\n\n);\n\n\/\/ ]]><\/script>\n\n<\/div>\n<\/pre><\/div>\n\n\n
Step 4: Finally run the below commands<\/strong><\/p>\n\n\n
\n$ php bin\/magento cache:clean\n\n$ php bin\/magento cache:flush\n<\/pre><\/div>\n\n\n
Step 5: Output:<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
<\/div>\n\n\n\n
Final Thoughts:<\/strong><\/h2>\n\n\n\n
So this was the easiest way which we have told you in this blog. This is how you can Add Popup on Button Click in Magento 2. Hope you liked the blog.<\/p>\n\n\n\n
So quickly go to the comment box and tell me how you like this blog?<\/p>\n\n\n\n
Stay tuned with us on our site to get new updates of Magento.<\/strong><\/p>\n\n\n\n
Thanks for reading and visiting our site.<\/p>\n\n\n
      
          
        How useful was this post?      <\/p>              
        Click on a star to rate it!      <\/p>        
      
                      
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>              <\/ul>    <\/div>    
    <\/p>