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.

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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