add/create Slide-out Panels

Question

How can I add/create Slide-out Panels in custom admin grid, which will appear on click of a link in grid action column?

I have gone through the code of the related product, upsell and cross-sell sections in product edit section and the select block while widget creation because all these have the slide-out panel implementation but wasn't able to get how it is working.

Answer 1

I put this code inside a theme, but the concept can be used inside any module with basically the same file paths.

First create a template file. This will hold the content on the page that will call for the modal, the content of the modal itself and the JS that will make the connection between inside the template and the JS file that will drive the modal logic.

app/design/frontend/{vendor_namespace}/{theme}/Magento_Cms/templates/popout.phtml

<div style="display:none" id="popup-menu" class="popup-menu" data-role="popup-menu" >
    <div style="margin: 30px 0;">
        <span><?php echo $block->escapeHtml(__('Some kind of text here inside your modal')) ?></span>
    </div>
</div>
<div class="page-main-actions">
    <?php echo $block->escapeHtml(__('For additional help, please click ')) ?><a href="javascript:void(0);" id="open-modal"><?php echo $block->escapeHtml(__('here.')) ?></a>
</div>
<script type="text/x-magento-init">
    {
        "#open-modal": {
            "Magento_Cms/js/popout": {
                "modalId": "#popup-menu",
                "modalTarget": "#open-modal",
                "modalTitle": "Your Modal Title"
            }
        }
    }
</script>

Note, that i'm using the built in system to pass data from the template to inside the JS file, this helps make the file more modular, you can use the same JS file to drive many modals while just changing out the content in the template file.

Then create the JS file.

app/design/frontend/{vendor_namespace}/{theme}/Magento_Cms/web/js/popout.js

define(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function($) {
        "use strict";
        $.widget('CustomModal.modalHelp', {
            _create: function() {
                this.options.modalOption = this._getModalOptions();
                this._bind();
            },
            _getModalOptions: function() {
                var options;
                options = {
                    type: 'slide',
                    responsive: true,
                    innerScroll: true,
                    title: this.options.modalTitle,
                    buttons: [{
                        text: $.mage.__('Close'),
                        class: 'confirm-button',
                        click: function () {
                            this.closeModal();
                        }
                    }]
                };
                return options;
            },
            _bind: function(){
                var modalOption = this.options.modalOption;
                var modalForm = this.options.modalId;

                $(document).on('click', this.options.modalTarget,  function(){
                    $(modalForm).modal(modalOption);
                    $(modalForm).trigger('openModal');
                });
            }
        });

        return $.CustomModal.modalHelp;
    }
);

There is a lot going on here, and i can't cover all of it. But the file pulls in the core JS modal with Magento_Ui/js/modal/modal and you then configure it with _getModalOptions. You can find all the options for the widget in the core file, this is just what i needed to get this running. You then pass this function to the _create constructor with this.options.modalOption = this._getModalOptions(). Next you trigger the _bind which executes the actual modal. I think there is most likely a better way to do this outside using a $(document).on('click' but this was working solid for me.

Hope this helps.

Answer 2

Here is a perfect guide to do so: please check.
[Solution] How to Open a Sliding Popup

Answer 3

require(
           [
               'jquery',
               'Magento_Ui/js/modal/modal'
           ],
           function (
               $,
               modal
           ) {
               var modaloption = {
                   type: 'slide',
                   modalClass: 'more-info-popup',
                   responsive: true,
                   innerScroll: true,
                   clickableOverlay: true,
                   title: 'Simple Modal',
                   buttons: false
               };
               var callforoption = modal(modaloption, $('#popup-info'));
               $('#popup-info').modal('openModal');
           }
       );