stickyHeaders_attachTo is not working in Magnific Popup

Question

I need fixed the header for tablesorter table that it's shows on magnific popup

I tried Below code to but it's not working for me

enter code here

      $("#itemlist").tablesorter({
         widthFixed : true,


       widgets: [ 'zebra', 'cssStickyHeaders', 'filter' ],

       widgetOptions: {
     stickyHeaders_attachTo: $('.wrapper'), or //both are not working

    cssStickyHeaders_attachTo      : '.wrapper',//
   cssStickyHeaders_addCaption    : true
}

      });

Answer 1

In this case, it looks like the magnific popup adds it's own wrapper (.mfp-wrap). So if you target it instead of the element wrapping the table, it works (demo):

$(function () {

    $('.open-popup-link').magnificPopup({
        type: 'inline',
        midClick: true,
        callbacks: {
            open: function () {
                // Will fire when this exact popup is opened
                // this - is Magnific Popup object
                $('table').tablesorter({
                    theme: 'blue',
                    widgets: ['zebra', 'filter', 'cssStickyHeaders'],
                    widgetOptions: {
                        // jQuery selector or object to attach sticky header to
                        cssStickyHeaders_attachTo: '.mfp-wrap',
                        cssStickyHeaders_addCaption: true
                    }
                });
            }
        }
    });

});