1

How to create a popup?

I want to create a popup for every page unless the customer clicked close. I want to show a popup with the cms block content.

I am not sure what to do or how to start I have looked at few from inchoo and here but they both didn’t help.

2

Here is the module also can manage Popup settings from Admin Panel. You can download from Github

enter image description here

| improve this answer | |
2

you can try this way..!

app/code/VENDOR/MODULE/view/frontend/layout/default.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="before.body.end">
            <block class="VENDOR\MODULE\Block\Popup" name="popup.config" template="VENDOR_MODULE::popup.phtml" />
        </referenceContainer>
    </body>
</page>

app/code/VENDOR/MODULE/Block/Popup.php

<?php

namespace Vendor\Module\Block;

class Popup extends \Magento\Framework\View\Element\Template
{
    public function __construct
    (
        \Magento\Framework\Stdlib\CookieManagerInterface $cookieManager,
        \Magento\Framework\View\Element\Template\Context $context
    )
    {
        $this->_cookieManager = $cookieManager;
        parent::__construct($context);
    }

    public function getShowPopup()
    {
        $showpopup = $this->_cookieManager->getCookie('showpopup');
        if(!empty($showpopup) && $showpopup == 'no')
            return 'no';
        else
            return 'yes';
    }
}

app/code/VENDOR/MODULE/view/frontend/templates/popup.phtml

<?php if($block->getShowPopup() != 'no'): ?>
    <div id="popup-modal">
        Hiren Goswami
    </div>

    <script type="text/javascript">
        require(['jquery', 'Magento_Ui/js/modal/modal', 'mage/cookies'],function($, modal, cookies)
        {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: 'mymodal1',
                    click: function () 
                    {
                        console.log('Continue...')
                    }
                }]
            };

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

            $('#popup-modal').modal('openModal').on('modalclosed', function() 
            {
                $.cookie('showpopup', 'no', { path: '/' });
            });
        });
    </script>
<?php endif; ?>
| improve this answer | |
  • This isn't loading up, I have followed this but not displaying I have the block, layout, template not doing – jibin george Jan 16 at 9:32
  • 1
    check template(popup.phtml) file is called or not ?? – Hiren Jan 16 at 11:41

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.