2

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:

RulerNature
  • 599
  • 2
  • 12
  • 37
  • Do you want to disable specific modal or all of them? What should happen on desktop if there is a modal (on click on some link/button, for example)? – Dekel Nov 24 '16 at 09:41
  • @Dekel specific modal, of course :) On desktop I have an hover effect that bring me in front some links that will redirect and no need for modal, but on mobile I want to open an modal. – RulerNature Nov 24 '16 at 09:44

3 Answers3

3

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>
Mukul Kant
  • 6,740
  • 5
  • 31
  • 51
3

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/

Community
  • 1
  • 1
Dekel
  • 53,749
  • 8
  • 76
  • 105
  • 1
    This in not an option actually, because if you will resize the desktop browser you'll get the modal ... – RulerNature Nov 24 '16 at 09:51
  • Correct, note that I said in this specific example I used the width. I also gave a link to other options of how to check if we are in mobile (using javascript). You can use any of them :) – Dekel Nov 24 '16 at 09:52
  • 1
    btw, the `md/lg` classes by bootstrap works the same.... they are width-based (and not real mobile-based). – Dekel Nov 24 '16 at 09:53
  • @RulerNature, did you see my comment? Did you check the link? I can update it inside the answer if you want... – Dekel Nov 24 '16 at 10:28
1

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>
acmsohail
  • 793
  • 8
  • 29