CODEWITHSUNDEEP
jqueryasp.netjquery-mobilemodal-dialog
user1436942
user1436942

Reputation: 75

How do I prevent Ouibounce from appearing on Mobile?

I've implemented Ouibounce and it works amazing. Below is the sample scripted code.

My question is how do I prevent the popup from launching on mobile? My first solution was to give the modal div a display:none value when under 479px but I am certain there is a smarter solution...

Thanks

<script>        
        var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
            aggressive: true,
            timer: 0,
            callback: function () { console.log('ouibounce fired!'); }
        });
        $('body').on('click', function () {
            $('#ouibounce-modal').hide();
        });
        $('#ouibounce-modal .modal-footer').on('click', function () {
            $('#ouibounce-modal').hide();
        });
        $('#ouibounce-modal .modal').on('click', function (e) {
            e.stopPropagation();
        });
    </script>

Upvotes: 2

Views: 822

Answers (2)

Dave
Dave

Reputation: 26

Ouibounce doesn't ever fire on mobile, by design. It tracks cursor movement and there isn't any on touchscreens.

Upvotes: 1

beefsupreme
beefsupreme

Reputation: 123

Sorry about the late response. Just found this after searching for something similar myself. The below should work for you. 

function() {
  // detect mobile device
  var mobile = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|webOS/i);

  if (mobile) {
    return mobile;
  } else {
    return "desktop";
  }
}

Upvotes: 1

Related Questions