Question

我们可以在移动设备上禁用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>

Answer 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触发模式将始终启用模式背景。

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

在移动Boostrap 4上禁用模式

1 个答案: