Magento – how to create a form popup-modal in magento2.3

magento2.3modal-popup

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.

Best Answer

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

Related Topic