Dj-Corps / simplemodal

Automatically exported from code.google.com/p/simplemodal
0 stars 0 forks source link

Overlay does not cover the whole screen on mobile devices #53

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
When using simpleModal on a mobile device in landscape mode, the gray overlay 
only seems to extend to the size of the screen. When scrolling down, the rest 
of the page is not covered and can be interacted with. This behaviour looks 
consistent across Android phones, the iPhone, iPad...

It seems you are already aware of the issue: 
http://forum.jquery.com/topic/using-simple-modal-on-itouch-in-landscape-mode

I have a quick/dirty patch idea accessible here: http://jsbin.com/ehetu4/16 
It's not fully tested but seems to fix it on an Android phone.

Cheers

Original issue reported on code.google.com by choicesm...@gmail.com on 20 Dec 2010 at 12:13

GoogleCodeExporter commented 9 years ago
It's not a true solution, but as a workaround, it gets me by for now:

http://forum.jquery.com/topic/using-simple-modal-on-itouch-in-landscape-mode#147
37000002469620

Original comment by j...@jeffbyrn.es on 16 Jun 2011 at 1:40

GoogleCodeExporter commented 9 years ago
I think i solved the problem:
i add a mobile detection like this :

var deviceAgent = navigator.userAgent.toLowerCase();
var isAppleMobile = deviceAgent.match(/(iphone|ipod|ipad)/i) != null;

then i change the getDimensions function like this :
----------------------------------------------------------------------
getDimensions: function () {
            var el = $(window);

            // fix a jQuery/Opera bug with determining the window height
            var h = $.browser.opera && $.browser.version > '9.5' && $.fn.jquery < '1.3'
                        || $.browser.opera && $.browser.version < '9.5' && $.fn.jquery > '1.2.6'
                ? el[0].innerHeight : el.height();

            //============> add
            if(isAppleMobile){
                w = $(document).width();    
            }else{
                w = el.width();
            }

            return [h, w];

            //===========>end 
        },
----------------------------------------------------------------------
i use $(document) for mobile devices instead of $(window)

Original comment by herv...@gmail.com on 14 Dec 2011 at 2:11