How to add a pop-up window to Magento 2 front page?

use pop-up solution I could use to put up a message to visitors

Inside your theme add below file in path

app\design\frontend\your\theme\Magento_Cms\layout\cms_index_index.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="content">
        <block class="Magento\Framework\View\Element\Template" name="test" template="Magento_Cms::popup.phtml"></block>
    </referenceContainer>
</body>

And Inside your theme add below file in path app\design\frontend\your\theme\Magento_Cms\templates\popup.phtml

<div id="popup" style="display: none;">
<h2>Your massage</h2>
</div>
<script>require(['jquery','Magento_Ui/js/modal/modal'],
function (
    $,
    modal
) {
    var modaloption = {
        type: 'popup',
        modalClass: 'my-popup',
        responsive: true,
        innerScroll: true,
        title: 'My Modal',
        buttons: []
    };
    var callforoption = modal(modaloption, $('#popup'));
    $('#popup').modal('openModal');
} );   </script>

Leave a comment Cancel reply