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:

Solution 1

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>

Solution 2

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/

Solution 3

U can use .hidden-lg class in the html. Check the below code it will hide the div in large devices. reference - Bootstrap Responsive Utilities

jsfiddle

<div class="panel panel-warning hidden-lg" id="mymodal" data-toggle="modal" data-target="#myModal">
  <div class="panel-body">
  <h3>click on panel to open the modal</h3>
  </div>
</div>
<!-- Modal -->
<div class="modal fade hidden-lg" 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>
      </div>
     <div class="modal-body">
    ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>