Tuesday 23 May 2017

How to show a div content in popup in facnybox


We assume that you already have added the fancybox js and css in your project



<html>

<div id="add_photo_notify_wrap">
    <div class="fancy_add_photo_notify_wrap">
        <div class="fancycontent">
            <p>This is my content sectioin.</p>
        </div>
        <div class="fancybtn">
            <a href="javascript:void(0)" class="btn add_photo_now">Add my photo now</a>
            <a href="javascript:void(0)" class="skip-it-now" onclick="$.fancybox.close();">Keep reviewing photos. I'll add my photo later.</a>
        </div>
    </div>
</div>

</html>

<script>

jQuery.fancybox({
  content: jQuery('#add_photo_notify_wrap').html(),
  modal: true,
  beforeShow: function(){
        jQuery(".fancybox-wrap").addClass('fancy_photo_notify');
    },
});

</script>

In this div id#add_photo_notify_wrap inner content will show in pop

and line jQuery(".fancybox-wrap").addClass('fancy_photo_notify'); will add class "fancy_photo_notify" to our popup
banner
Previous Post
Next Post

0 comments: