0

I have created a modal to warn mobile users to turn on their WIFI before proceeding through my data-intensive site. I would like to open this modal on mobile (xs, s) devices. I am using bootstrap 4.

I have tried to leverage the bootstrap responsive utilities in my template, particularly the class .hidden-md-up, but no matter where I use this class, there ends up some remaining overlay that disables some site functionality. This is because I'm still opening the modal, then hiding it: not an elegant solution.

I'm looking for any way to leverage bootstrap to sense for a small screen / mobile device. I'm using angular 2, and therefore am avoiding jQuery. I haven't used jQuery in my project yet. It would be nice to avoid loading the library just for this bonus functionality

austin
  • 998
  • 2
  • 12
  • 22

1 Answers1

1

You could use matchmedia as below, but it relies on hard coding the width that bootstrap changes at

if (window.matchMedia('(max-width: 767px)').matches) {
    //load your modal here
} else {
    //...
}

If you don't want to hard code the width, check out this post for a way to determine the bootstrap size breaks: https://stackoverflow.com/a/28373319/4553162

Community
  • 1
  • 1
mahi-man
  • 4,326
  • 2
  • 25
  • 36
  • You did it! I just dove into hours of hacking @media queries, with no prevail. Should have checked back here sooner :) but at least I learned. Your solution is appreciated – austin Nov 24 '16 at 20:39