Magento 2.1 JavaScript – Magento 2 Modal Popup Buttons

arrayjavascriptmagento-2.1

I'm trying to add more than one button in my Magento 2 modal. I got it to pop up but I can't seem to get another button to appear. and I adding the second button correctly to the array?

UPDATED CODE!

require([
"jquery",
"Magento_Ui/js/modal/modal"
], function($, modal){
var options = {
    type: 'popup',
    responsive: true,
    innerScroll: true,
    title: "Age verification", //write your popup title 
    buttons: [
        {
            text: $.mage.__('Under 21'),
            class: 'under-21 button',
            click: function () {
                console.log('Do something here......');
                // Do something here........
            }
        },
        {
            text: $.mage.__('21+ Enter'),
            class: 'over-21 button',
            click: function () {
                console.log('Do something here......');
                this.closeModal();
                // Do something here........
            }
        }
    ]
};
    var popupdata = $('<div />').append($('#age-check-model'));
    modal(options, popupdata);
    popupdata.modal('openModal');
});

works great now

Best Answer

I adding the second button correctly to the array?

No, you add another property to the options object.

Try with this:

require([
    "jquery",
    "Magento_Ui/js/modal/modal"
], function($, modal){
    var options = {
        type: 'popup',
        responsive: true,
        innerScroll: true,
        title: "Age verification", //write your popup title 
        buttons: [
            {
                text: $.mage.__('Under 21'),
                class: 'under-21 button',
                click: function () {
                    console.log('Do something here......');
                    // Do something here........
                }
            },
            {
                text: $.mage.__('21+ Enter'),
                class: 'over-21 button',
                click: function () {
                    console.log('Do something here......');
                    this.closeModal();
                    // Do something here........
                }
            }
        ]
    };

In the above, we add another object to the buttons array

Related Topic