CODEWITHSUNDEEP
javascriptjqueryfancybox
Koen Peters
Koen Peters

Reputation: 12916

What popup plugin like fancybox works on touch devices?

I need a popup plugin (like fancybox) that can contain an iframe and that works well in both desktop browsrs as touch browsers like the ipad, android and iphone. Fancybox behaves pretty strange when I pinch the touch browsers. What I really need it to do is:

  1. contain an iframe
  2. when I zoom in on the touch browser I can still scroll the top page left and right without it jumping all over the place. It should behave like any other element in the page.
  3. I should be able to say it should be a (for example) 800 pixels wide and 90% of the viewport heigh
  4. It should preferably reflow if the viewport size changes
  5. It should stay centered on the page if the page behind it scrolls.

Upvotes: 2

Views: 3161

Answers (2)

Tom Franssen
Tom Franssen

Reputation: 456

The default Fancybox2 has some build in support for touch. If you look at the source you will see an isTouch variable used throughout the code and default settings. The default setting autoCenter has an default value of !isTouch, so on the mobile browser it will not be centered because it's not very well supported. I would advice you to test these defaults:

    <script>
        $(document).ready(function() {
            $('#selector').fancybox({
                modal: false
                ,type: 'iframe'
                ,minWidth: 960
                ,height: '90%'
                ,closeClick: false
                ,padding: 0
                ,scrolling: 'no'
                ,autoSize      : false
                ,helpers: {
                    overlay :{
                        closeClick:false
                        ,speedOut:0
                        ,showEarly:true
                    }
                }
            });
        });
    </script>

...

Upvotes: 2

jose
jose

Reputation: 2543

what about jQueryUI Dialog?

As my experience it behaves well with mobile devices and it supports iframe as a dialog content.

Upvotes: 2

Related Questions