Magento 2 UI Library - JavaScript Modal Widget - WebSecuritySpecialist

Sunday, 29 October 2017

Magento 2 UI Library - JavaScript Modal Widget

Magento 2 UI Library - JavaScript Modal Widget


Magento 2 has built in UI Library for the Javascript Modal Popup.
To achieve the Custom Modal Popup in your Magento 2 website.

Html Code -

<div id="popup-modal-custom" style="display: none;">
// Your Content Goes Here 
</div>

<a href="#" id="buttonid">Open Modal</a>

Javascript Code -

<script>
    require([
        'jquery',
        'Magento_Ui/js/modal/modal'
    ], function ($, modal) {

            var options = {
                'type': 'popup',
                'modalClass': 'your_popup_custom_class',
                'responsive': true,
                'innerScroll': true,
                'buttons': [{
                    text: $.mage.__('Close'),
                    class: 'back_button_class',
                    click: function () {
                        this.closeModal();
                        // any javascript coode
                    }
                }]
            };  

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


    });
</script>

You can add the above code in the phtml file and on frontend modal will show up.
If you still get any issue, we are happy to assist you - feel free to drop us an email.

No comments:

Post a Comment