Disable fade for Bootstrap modal on tablet

Question

I've tried searching but haven't found any answers to this question. Wondering if there is a way to disable the fade/fade in only on tablets. I really like the effect but it's a bit glitchy on tablets, mobile devices. So, wondering if I can do some sort of @media or add some javascript/jQuery to disable the feature on tablets.

Answer 1

It's possible by just overriding bootstrap CSS in appropriate media query.

Example: (Bootstrap 3.0.2)

@media screen and (max-width: 979px) {

  /* Modal wrapper */
  .modal.fade {
    opacity: 1;
   }

  /* Modal dialog */
  .modal.fade .modal-dialog {
    -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
            transform: translate(0,0);
  }

  /* Semi-transparent backdrop */
  .modal-backdrop.fade {
    opacity: .5;
    filter: alpha(opacity=50);
  }
}

Demo