时间戳

首页 > 解决方案 > 在移动 boostrap 4 上禁用模式

jquery - 在移动 boostrap 4 上禁用模式

问题描述

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

标签： jqueryhtmlmodal-dialogbootstrap-4

解决方案

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

<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无论如何都会启用模态背景。

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

推荐阅读