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>
  • Did you try anything so far? By adding js for fancybox or initialize it.. – Akhilesh Patel May 1 '17 at 6:17
  • 1
    Yes...but not working – Rohan Hapani May 1 '17 at 6:27
  • can you share your code you tried so far ? – Akhilesh Patel May 1 '17 at 6:31
  • Yes..see the code... – Rohan Hapani May 1 '17 at 6:37
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>
  • @RohanHapani Mark as Accept this answer to help other developers.... – Prince Patel May 2 '17 at 12:47

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.