0

I have created popup on href click and on click popup is opening fine. But I want to remove Continue button from modal-footer which is just used to close the popup. Want to remove it. Any idea?

modal-form.js is as below.

define([
    'jquery',
    'Magento_Ui/js/modal/modal'
],
function($) {
    "use strict";
    //creating jquery widget
    $.widget('Vendor.modalForm', {
        options: {
            modalForm: '#personilized-modal-form',
            modalButton: '.open-modal-form'
        },
        _create: function() {
            this.options.modalOption = this._getModalOptions();
            this._bind();
        },
        _getModalOptions: function() {
            /**
             * Modal options
             */
            var options = {
                type: 'popup',
                responsive: true,
                title: 'Personilized Custom Jewelery',
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            return options;
        },
        _bind: function(){
            var modalOption = this.options.modalOption;
            var modalForm = this.options.modalForm;

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

    return $.Vendor.modalForm;
});
7

Why not just remove buttons from footer?

_getModalOptions: function() {
    /**
     * Modal options
     */
    var options = {
        type: 'popup',
        responsive: true,
        title: 'Customer Details',
        buttons: []
    };

    return options;
},
  • In my opinion, this is the best/tidiest option. – Dan Norris Mar 28 at 11:07
5

Got the solution to add opened function getModalOptions. Something like this,

        _getModalOptions: function() {
            /**
             * Modal options
             */
            var options = {
                type: 'popup',
                responsive: true,
                title: 'Customer Details',
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }],
                opened: function($Event) {
                    $(".modal-footer").hide();
                }
            };

            return options;
        },

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.