Display bootstrap modal only for mobile and not for desktop

Question

I have a nasty problem regarding bootstrap modals on mobile vs desktop.

so the question will be short:

How can I disable bootstrap modal on desktop and enable only for mobile/tablets?

Here is a small js for tests:

Answer 1

There are several ways to check if you are on mobile. You can read more here.

In this example I just used the width of the screen and based on it decided if to show the modal or not:

$('#myModal').on('show.bs.modal', function (e) {
  if (window.innerWidth < 800) {
    return e.preventDefault();
  }
})

Here is the update to your jsfiddle:
http://jsfiddle.net/1aeur58f/28/

Answer 2

You can use responsive utilities classes. In your case you should use .hidden-md or .hidden-md class in modal box

<div class="modal fade hidden-lg hidden-md" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>