2

I want to create custom modal popup widget and call on my .phtml file. How can I do that?

What will be the whole procedure for creating modal and accessing it from the .phtml file?

11

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>
7

You just need to add a container for the modal <div id="popup-modal"></div> and a small bit of javascript to initialise the modal like below:

<div id="popup-modal"><p>Hello World</p></div>

<script>
require(
[
    'jquery',
    'Magento_Ui/js/modal/modal'
],
function(
    $,
    modal
) {
        var options = {
        type: 'popup',
        responsive: true,
        innerScroll: true,
        title: 'Modal Title',
        modalClass: 'custom-modal',
        buttons: [{
            text: $.mage.__('Continue'),
            class: '',
            click: function () {
                this.closeModal();
                $('#popup-modal').html(" ");
            }
        }]
    };

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

    //this opens the modal, you can use some click event or whatever you need to trigger the modal here
    $("#popup-modal").modal('openModal');
}
);
</script>

So the $("#popup-modal").modal('openModal'); will trigger the popup instantly however could be used like below to maybe trigger when clicking a button or link for example:

$(".open-modal").click(function() {
        $("#popup-modal").modal('openModal');
});
  • How can i call the same model from external javascript file? – akshay billore Jan 5 '18 at 14:07
  • Just take that script out and add externally it will work the same. – harri Jan 5 '18 at 14:08
  • I have tried the same, I placed my js file in web\js of my module also I have included the header tag in my layout.xml but cant access the modal. where I am wrong can you tell? – akshay billore Jan 5 '18 at 14:13
  • Well i would first check that you can see your JS loaded in the page. Check that your modal markup present also. Then check for and errors in your console. – harri Jan 5 '18 at 14:14
  • When I do "view page source" the file is included but on console it is giving error "404" – akshay billore Jan 5 '18 at 14:18
0

I have used this, hope this will help you

 <button type="button" class="action" data-trigger="trigger">
    <span data-bind="i18n: 'Click Here'"></span>
</button>
<div data-bind="mageInit: {
        'Magento_Ui/js/modal/modal':{
            'type': 'popup',
            'title': 'Popup title',
            'trigger': '[data-trigger=trigger]',
            'responsive': true,
            'buttons': [{
                text: 'Submit',
                class: 'action'
            }]
        }}">
    <div class="content">
        Popup Content
    </div>
</div>

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.