here I want to create a modal pop up when the button was a click, by using block file how can I pass the modal link through this below code...

 public function getMainButtonsHtml()
    $html = parent::getMainButtonsHtml();//get the parent class buttons
    $addButton = $this->getLayout()->createBlock('Magento\Backend\Block\Widget\Button')
        'label'     => 'Add Amount',
        'onclick'   => "setLocation('redirect-url')",
        'class'   => 'amount'
    return $addButton.$html;

Note: 'onclick' => "setLocation('redirect-url')", ----> here i want to pass the link ,Wheather it is possible???If yes please help.

2 Answers 2


You should create a module first, then after create a requirejs-config.js file at app/code/Vendor/YourModule/view/frontend/requirejs-config.js

var config = {
    paths: {            
         'myjs': "Vendor_YourModule/js/myfile"
    shim: {
    'myjs': {
        deps: ['jquery']

You need to create myfile.js in app/code/Vendor/YourModule/view/frontend/web/js/myfile.js

        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: 'mymodal1',
                    click: function () {

            var popup = modal(options, $('#popup-modal'));

Then your phtml file should look like:

<div data-mage-init='{"myjs": {}}'>
    <a href="#" id="click-me">Click Me</a>

<div id="popup-modal" >
    yes I am the modal.

Also you can refer to this link for more help:

Modal widget

  • How can i link this file via button on block(onclick function), weather there is any possiblities to add??
    – user83013
    Commented Sep 18, 2019 at 4:36
  • You mean that you have a button on block ??? but in my example you can make button in phtml file and do whatever you want... Commented Sep 18, 2019 at 10:37
  • Okay i show you another example from scratch, which may help you.... Commented Sep 18, 2019 at 10:51
  • ok sir..........
    – user83013
    Commented Sep 18, 2019 at 11:04
  • Hello sir , can you give me an example how to prepare 2 columns layout using ui-component, I already created it, but when i click to edit it cannot fetch details...So how can I prepare the block and controller part for this????
    – user83013
    Commented Sep 19, 2019 at 10:35

First, create a configuration file module.xml in /app/code/Example/M2Modal/etc/ directory and add the following code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Example_M2Modal" setup_version="1.0.0" />

Now, create the file registration.php in the root directory of the module /app/code/Example/M2Modal/ and insert the following code into it:

use Magento\Framework\Component\ComponentRegistrar;

Create a layout and a template file, so that the directories look like this:

/app/code/Example/M2Modal/view/frontend/layout/ /app/code/Example/M2Modal/view/frontend/templates/

Now, create a default.xml file inside the layout folder of your module and add the following code to it:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
        <referenceContainer name="main">
            <block class="Example\M2Modal\Block\Example" template="example.phtml" />

In the code above, you will see a block defined in the main container, which extends the Example\M2Modal\Block\Example block (a block that we will create later).

Now, add the example.phtml file in templates folder and insert the following code to it:

<div id="modal-content">
    <?php echo $block->getContent(); ?>
<button id="example-modal-button" data-mage-init='{"example-modal": {"target": "#modal-content"}}'>
    Open modal

Here, use the data-mage-init='{“example-modal”: {“target”: “#modal-content”}}’ attribute (a declarative notation) to add a JavaScript component in example.phtml template.

Now, add a JS file to initialize and execute the component.

Create a file example-modal.js in /app/code/Example/M2Modal/view/frontend/web/js/ directory and add following code to it:

        "jquery", "Magento_Ui/js/modal/modal"
    ], function($){
        var ExampleModal = {
            initModal: function(config, element) {
                $target = $(config.target);
                $element = $(element);
                $element.click(function() {
        return {
            'example-modal': ExampleModal.initModal

You will notice that the example-modal.js code uses the define function at the top. This function is from RequireJS, which is an array of dependency. In the above example, example-modal.js uses jquery and Magento_Ui/js/modal/modal.

The example-modal.js file should be declared in the requirejs-config.js file because this config file is used by RequireJS.

So, create the requirejs-config.js file in /app/code/Example/M2Modal/view/frontend/ directory and add the following code to it:

var config = {
    map: {
        '*': {
            'example-modal': 'Example_M2Modal/js/example-modal'

As the Example\M2Modal\Block\Example block is already defined in the layout file, create the Example.php block file in the /app/code/Example/M2Modal/Block/ folder with the following code in it:

namespace Example\M2Modal\Block;
class Example extends \Magento\Framework\View\Element\Template
    public function getContent() : string
        return 'Dummy content';


  • Enable the module
  • Run setup upgrade command
  • Clear the Magento 2 cache

That’s it.

The window looks like this: enter image description here

Want want something like this ??? enter image description here

  • how can i use this for backend
    – user83013
    Commented Sep 18, 2019 at 11:37
  • 1
    If you want to do this in you own custom module then instead of /frontend use /adminhtml Commented Sep 18, 2019 at 11:44
  • Raji tell me exactly what you want to achieve, I've updated my answer with an image tell me you want something like that.... Commented Sep 18, 2019 at 11:59
  • No sir... i have create a button above the custom grid ...So that when i click the button i want popup form..But here i would not use xml file..I prepare my grid via block file only.. So that I am asking..
    – user83013
    Commented Sep 18, 2019 at 12:08
  • okay i'll try to help you out... Commented Sep 18, 2019 at 12:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.