在移动引导程序 4 上禁用模式答案

【问题标题】：disable modal on mobile boostrap 4在移动引导程序 4 上禁用模式
【发布时间】：2019-01-01 04:55:24
【问题描述】：

我们可以在移动设备上禁用 Modals 吗？

我查看了其他线程，但由于刚开始编写脚本，我也不太明白，如果有必要的话，我不知道如何使用 jquery。

这是我的脚本。

<div class="col-sm" >

                <input type="image" src="horse.png" class="img-thumbnail" data-toggle="modal" data-target=".horseModal-modal-lg">

                <div class="modal fade horseModal-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

                    <div class="modal-dialog modal-lg">

                    <div class="modal-content">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <img class="img-responsive" src="horse.png" id="imageSize">
                    </div>

                  </div>

                </div>

            </div>

【问题讨论】：

标签： jquery html modal-dialog bootstrap-4

【解决方案1】：

最安全的方法是在手机上不显示模式切换：

<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<button type="button" class="btn btn-primary d-none d-sm-inline-block" 
        data-toggle="modal" data-target="#yourModal">
  Launch modal
</button>

注意按钮上的d-none d-sm-inline-block 类。根据您在渲染模式切换时想要的 display 值，您可能希望将其更改为 d-sm-flex d-sm-block 或 d-sm-inline。

如果您想从768px 向上（而不是545px 向上）开始显示模式，请使用d-md-* 类。或d-lg-* 从992px 开始显示它。

更糟糕的选择是将整个模式包装在一个类似的元素中

<div class="d-none d-sm-block"> 
   your modal markup here
</div>

...但是触发模态的 afaik 无论如何都会启用模态背景。

更糟糕的选择是使用一个库来检查当前设备是否是移动设备并阻止以编程方式打开模式。

【讨论】：