JQuery Popup Overlay works on browser resize, doesn't work on mobile devices

I’m having a really frustrating problem w/ getting this popup overlay plugin to work on my site. If I resize the browser, the overlay stays at 100% of the viewport and the responsive layout of the divs adjust correctly. However, when I open the popup on an ipad or iphone, the overlay expands beyond the viewport and you can barely scroll. Here’s the example:

http://linseedstudio.com/projects/kast/purchaseinstores.html

And here’s the source of the plugin:

http://dev.vast.com/jquery-popup-overlay/

I’d be incredibly grateful for anyone’s ideas on what might be the culprit.

Thank you!

_Mike

Additional Note:

I just tried on Safari ios and it seems that while the overlay still exceeds the viewport width after initially opening it, changing the orientation once makes the overlay fit. Only in Safari though, doesn’t work in Firefox or Chrome.

Do the demos on vast’s site work properly on mobile devices?

:slightly_smiling:

Hi there and thanks for the reply. They do in fact work properly, so it’s definitely something to do with my implementation. I’ve been experimenting for the last hr. taking the demo files (the index page is the same as the demo on the vast site) and using process of elimination to figure out what’s wrong. I’ve found that I can get rid of pretty much everything except when I delete this:

jQuery Popup Overlay

jQuery plugin for responsive and accessible modal windows and tooltips

        <p class="text-muted">Currently v1.7.11</p>
    </div>
</div>

right above the trigger button or this:

    <h2>Usage</h2>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site Title</title>
</head>
<body>
  <!-- Add an optional button to open the popup -->
  <button class="my_popup_open">Open popup</button>
  <!-- Add content to the popup -->
  <div id="my_popup">
    ...popup content...
    <!-- Add an optional button to close the popup -->
    <button class="my_popup_close">Close</button>
  </div>
  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
  <!-- Include jQuery Popup Overlay -->
  <script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.11/jquery.popupoverlay.js"></script>
  <script>
    $(document).ready(function() {
      // Initialize the plugin
      $('#my_popup').popup();
    });
  </script>
</body>
</html>

right below it, the overlay slowly starts to become zoomed in and exceed the mobile viewport. It seems that deleting each line piece by piece makes it zoom in more and more, but I have no idea why this is.