0

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')
        ->setData(array(
        'label'     => 'Add Amount',
        'onclick'   => "setLocation('redirect-url')",
        'class'   => 'amount'
    ))->toHtml();
    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

0

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

    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: 'mymodal1',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-modal'));
            $("#click-me").on('click',function(){
                $("#popup-modal").modal("openModal");
            });
        }
    );

Then your phtml file should look like:

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


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

Also you can refer to this link for more help:

Modal widget

7
  • How can i link this file via button on block(onclick function), weather there is any possiblities to add??
    – user83013
    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... Sep 18, 2019 at 10:37
  • Okay i show you another example from scratch, which may help you.... Sep 18, 2019 at 10:51
  • ok sir..........
    – user83013
    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
    Sep 19, 2019 at 10:35
0

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" />
</config>

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

<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
  ComponentRegistrar::MODULE,
    'Example_M2Modal',
    __DIR__
);

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">
    <body>
        <referenceContainer name="main">
            <block class="Example\M2Modal\Block\Example" template="example.phtml" />
        </referenceContainer>
    </body>
</page>

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(); ?>
</div>
<button id="example-modal-button" data-mage-init='{"example-modal": {"target": "#modal-content"}}'>
    Open modal
</button>

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:

define([
        "jquery", "Magento_Ui/js/modal/modal"
    ], function($){
        var ExampleModal = {
            initModal: function(config, element) {
                $target = $(config.target);
                $target.modal();
                $element = $(element);
                $element.click(function() {
                    $target.modal('openModal');
                });
            }
        };
        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:

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

Finally,

  • 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

15
  • how can i use this for backend
    – user83013
    Sep 18, 2019 at 11:37
  • 1
    If you want to do this in you own custom module then instead of /frontend use /adminhtml 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.... 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
    Sep 18, 2019 at 12:08
  • okay i'll try to help you out... Sep 18, 2019 at 12:10

Your Answer

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

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