jQuery Mobile popup scrolling with iframe on iOS


I recently troubled using popups with jQuery Mobile because the content of the popup inside an iframe was bigger than the current page contents. Mobile Safari just scrolled the whole page instead of scrolling inside the popup contents.

At last I found a solution as a combination of preventing default touch-events when opening the popup plus inserting a snippet of code to wrap the iframe inside a div with some special css directives.

Place the following Javascript-Code anywhere on your page:

$(document).ready(function() {
      popupbeforeposition: function(event, ui) {
         $("body").on("touchmove", false);

      popupafterclose: function(event, ui) {

   $('.popup iframe').wrap(function() {
      var $this = $(this);
      return $('<div />').css({
         width: $this.attr('width'),
         height: $this.attr('height'),
         overflow: 'auto',
         '-webkit-overflow-scrolling': 'touch'

Et voila…



Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:


Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )


Verbinde mit %s