Magnific Popup - Browser scrolls on the top on image click

Question

I am using Magnific Popup plugin for displaying image in lightbox.When I click on the image in Chrome, the browser scrolls on the top, after that the menu is not clickable.

$('.img-item').magnificPopup({ 
    type: 'image',
    gallery:{
        enabled:true
    }   
});

make sure your plug-in is not adding anchor tag with href="#" — Ronak Patel, May 20 '14 at 15:47
Without more information, you are wasting your bounty. Please post an example of the page HTML and a complete list of the plugins you are using (including versions). Ideally put it all in a JSFiddle :) — iCollect.it Ltd, May 21 '14 at 16:15
Did you solve it ?, after some 2 hours of CSS, JavaScript, I found a weird solution... here it is: http://stackoverflow.com/a/28749311/2615737 — Francisco Corrales Morales, Feb 26 '15 at 17:50

score 13 · Answer 1 · edited Jul 22 '18 at 17:16

13

Alright folks, I guess I found the solution.

I trimmed off my full script yet fixedContentPos: false, adding noscroll to body element on "open" and remove it on "close" is important :

$('.open-link').magnificPopup({
  type: 'image',
  closeOnBgClick: true,
  fixedContentPos: false,
  callbacks: {
    open: function() {
      jQuery('body').addClass('noscroll');
    },
    close: function() {
      jQuery('body').removeClass('noscroll');
    }
  }
});

Finally, create a CSS rule for noscroll as :

body.noscroll {
  overflow-y: hidden!important;
}

fixedContentPos:false prevents using fixed position for body and keeps the scrollbar on the same position. However, it doesn't prevent scroll and user is still able to scroll up / down. Using overlow-y:hidden hides scrollbar and disables mousewheel.

edited Jul 22 '18 at 17:16

Mosh Feu

28,354
16
88
135

answered May 21 '16 at 07:40

Mertafor

374
4
17

Def the best solution. Just doing `fixedContentPos: false` meant the user could scroll, so that's no good. This solution worked like a charm! – denislexic Aug 31 '16 at 02:04
Worked perfectly for me. – Emiliano Sangoi Jul 04 '19 at 15:06
I like this solution. Only problem is, when the content of the popup is higher than the popup itself, there is no way to scroll anymore. I fixed it by adding "overflow-y: auto" to .mfp-container. – Kevin Glier Jul 09 '21 at 16:21
Thank you for this. It worked for my situation – redshot Dec 09 '21 at 03:39

score 7 · Answer 2 · answered Aug 04 '14 at 16:54

7

Magnific has an option fixedContentPos. This is set to 'auto' by default, causing it to fix content to the top. Setting fixedContentPos: false should force magnific to use the absolute position based on current scroll.

answered Aug 04 '14 at 16:54

SeeDoubleYou

1,253
2
15
25

1

didn't work, neither 'auto', true, false. Also, tried with the fixedBgPos and alignTop properties, but no luck., here is how I did it: http://stackoverflow.com/a/28749311/2615737 – Francisco Corrales Morales Feb 26 '15 at 17:49

score 4 · Answer 3 · answered Mar 12 '16 at 08:53

4

For me it was the problem with delegate:'a' option. Everywhere it was set, I need to add fixedContentPos: false and this did the trick for me.

answered Mar 12 '16 at 08:53

Phil

943
2
6
18

score 2 · Answer 4 · answered Mar 26 '16 at 18:43

2

You need use: preventDefault()

JavaScript:

function attach_magnific_popup(e){
e.preventDefault();
jQuery('a.open-popup-link').magnificPopup({
        type: 'inline',
        //fixedContentPos: true,
        //fixedBgPos: true
    });
}

HTML:

<a href="#pop-up-content"  class="open-popup-link" onclick="attach_magnific_popup(event);">Click here...!</a>

answered Mar 26 '16 at 18:43

user2568659

21
2

This did it for me. Placeholder href="#" was causing a jump to the top. – squarecandy Nov 30 '16 at 06:14

score 0 · Answer 5 · answered May 22 '14 at 13:10

0

Sounds like there's a JS error somewhere or your image is wrapped into an <a href=""></a> tag and it interferes with default behavior.

answered May 22 '14 at 13:10

Serg Chernata

12,280
6
32
50

score 0 · Answer 6 · answered Feb 26 '15 at 17:48

Ok, this was a weird thing. Here is how I fix it:

I removed the .magnificPopup({ code from the onReady, and instead move it to a function.
Then I added the an onlick event to the element which triggers the popup.

I don't know why, but that worked.

Here is the code:

JavaScript

function attach_magnific_popup(){
jQuery('a.open-popup-link').magnificPopup({
        type: 'inline',
        //fixedContentPos: true,
        //fixedBgPos: true
    });
}

HTML:

<a href="#pop-up-content"  class="open-popup-link" onclick="attach_magnific_popup();">Click here...!</a>


<div id="pop-up-content" class="white-popup mfp-hide" >
....Pop up content...
</div>

Note: I did tried with fixedBgPos, fixedContentPos, alignTop properties, but didn't work.

score 0 · Answer 7 · edited Apr 03 '17 at 11:26

0

Looks like moving the magnificPopup code from $(document).ready() to $(window).load() did it for me. Here is my code:

$(window).load(function() {
  $('.open-popup-link').magnificPopup({
    type:'inline',
    closeBtnInside: true,
    fixedContentPos: false,
    midClick: true
  });
});

edited Apr 03 '17 at 11:26

Tom

4,257
6
33
49

answered Apr 03 '17 at 11:05

Will Wong

9
1

Magnific Popup - Browser scrolls on the top on image click

7 Answers7