Jump to content

.London Domains - £4
Photo

IOS Modal Bug! Please tell me one of you has a workaround for this?!


  • Please log in to reply
7 replies to this topic

#1 bennkingy

bennkingy
  • Member
  • Newbie
  • 179 posts

Posted 20 February 2019 - 21:11

https://stackoverflo...s-open-ios-only --- I am racking my brains. 

Is there a modal js library you use that doesn't allow the page/body to scroll behind the modal (very annoying) ???

 

Thanks for the help guys!


  • 0

#2 MikeChipshop

MikeChipshop
  • Overlord
  • Mini Member
  • 4,692 posts

Posted 21 February 2019 - 08:16

I don't use a library or plugin for modals but I use a variation on "Body Scroll Lock" when I code a solution.

 

The main problem (as always) is that different devices and browsers require a different solution (blerg). More details can be found here https://www.npmjs.co...ody-scroll-lock

 

Hope that helps.


  • 0

#3 bennkingy

bennkingy
  • Member
  • Newbie
  • 179 posts

Posted 21 February 2019 - 08:44

Thanks mike! - I am going to bring this up in my morning sprint and get some time to implement it :)


  • 0

#4 bennkingy

bennkingy
  • Member
  • Newbie
  • 179 posts

Posted 21 February 2019 - 10:55

Hi Mike,

I have implemented the code this morning but it does not seem to work :/

    // 1. Import the functions
    const disableBodyScroll = bodyScrollLock.disableBodyScroll;
    const enableBodyScroll = bodyScrollLock.enableBodyScroll;

    // 2. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
    const targetElement = document.querySelector(".portfolio-panel--open");
    
    /* Body Scroll Lock */
    if($(window).width() <= 768 || ($(window).innerWidth() <= 768 )) {

        $('.portfolio-click-handler').on('click', function(){

            // // Stops listings scrolling
            // $('body').css({
            //     'overflow':'hidden',
            //     'height':'100%'
            // });

            disableBodyScroll(targetElement);

        });

        $('.panel-close').on('click', function(){

            enableBodyScroll(targetElement);

        });

    };

https://bit.ly/2EoeN3b - Click on one of the properties to open the panel. Any idea whats wrong?

 

Or have you implemented this on a website that I can check out the source code on?


Edited by bennkingy, 21 February 2019 - 11:13.

  • 0

#5 MikeChipshop

MikeChipshop
  • Overlord
  • Mini Member
  • 4,692 posts

Posted 21 February 2019 - 11:20

Seems to be working for me on Windows Chrome, what are you checking it on?


  • 0

#6 bennkingy

bennkingy
  • Member
  • Newbie
  • 179 posts

Posted 21 February 2019 - 11:24

Safari & chrome iPhone is where the code is not working :(


  • 0

#7 MikeChipshop

MikeChipshop
  • Overlord
  • Mini Member
  • 4,692 posts

Posted 21 February 2019 - 11:26

Does the demo work for you here https://bodyscrolllock.now.sh/


  • 0

#8 bennkingy

bennkingy
  • Member
  • Newbie
  • 179 posts

Posted 21 February 2019 - 12:39

Hmm it does, I must be messing up somewhere. Thanks dude!


Edited by bennkingy, 21 February 2019 - 12:40.

  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users