1

I want to display popup using fancybox when page load in magento2 . How is it possible ?

Please help me....

    <!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
require([ 'jquery', 'jquery/ui','fancybox'],  function( $ ) {

     $(document).ready(function() {
        $.fancybox("#hidden");
        //alert("a");
    });

}); 
</script>
</head>
<body>
<div id="hidden" style="display:none;">
    Hi this is hidden
</div>

</body>
</html>
4
  • Did you try anything so far? By adding js for fancybox or initialize it.. Commented May 1, 2017 at 6:17
  • 1
    Yes...but not working Commented May 1, 2017 at 6:27
  • can you share your code you tried so far ? Commented May 1, 2017 at 6:31
  • Yes..see the code... Commented May 1, 2017 at 6:37

1 Answer 1

1

For Exmaple: I used magnify popup to display popup on load page

Namespace: Prince

ModuleName: Popup

1) First of all put js and css files of your popup in web folder of module

app/code/Prince/Popup/view/frontend/web/js/jquery.magnific-popup.min.js
app/code/Prince/Popup/view/frontend/web/css/magnific-popup.css

2) Now define your custom popup js in requirejs-config.js or create new requirejs-config.js file

app/code/Prince/Popup/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            magnificPopup: 'Prince_Popup/js/jquery.magnific-popup.min',       
        }
    },
    shim: {
        magnificPopup: {
            deps: ['jquery']
        }
    }
};

3) Now create template file for popup

app/code/Prince/Popup/view/frontend/templates/index/popup.phtml

<div id="popup-content" class="popup-content mfp-with-anim">
Your Poup Content...............
</div>

<script type="text/javascript">
  requirejs(['jquery', 'magnificPopup' ],
    function ($, magnificPopup) {
        $(document).ready(function(){
            $.magnificPopup.open({
              items: {
                src: '#popup-content'
                },
                type: 'inline',
                removalDelay: 500,
                mainClass: 'mfp-newspaper'
              });
            $('#popup-content').css('display','inline block');
        });
    });
</script>

4) Inject this template file in xml where you need to show popup

for exmaple to show popup on home page. ovveride cms_index_index.xml

<?xml version="1.0" ?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Prince_Popup/js/jquery.magnific-popup.min.js"/>
        <css src="Prince_Popup/css/magnific-popup.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="index.home" template="Prince_Popup::index/popup.phtml"/>
        </referenceContainer>
    </body>
</page>
1
  • @RohanHapani Mark as Accept this answer to help other developers.... Commented May 2, 2017 at 12:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.