Question

我想为小屏幕禁用/停用模式。我尝试将APK与Bootstrap结合使用，这会停用我的模态，但会阻塞屏幕。

我的HTML：

Class="hidden-xs"

我想为小屏幕禁用/删除以下代码：

  <div class="row">
    <div class="col-sm-3">
        <p class="titre">Nature morte à l'écrevisse</p>
        <img src="img/1.jpg" style="width:100%" alt="Peinture à huile clair obscur"data-toggle="modal" data-target="#myModal1">
          <div class="modal fade" id="myModal1" role="dialog" >
            <div class="modal-dialog" >
              <div class="modal-content"style="background-color: rgba(0,0,0,0) !important;border-style: none; box-shadow: none;">
                    <h4 style="color: white !important;">Nature morte à l'écrevisse</h4>
                    <img src="img/1.jpg" class="" style="width:100%;" alt="Peinture à huile clair obscur">
                    <p style="color: white !important;">150x120 cm avec cadre -  A Vendre</p>
              </div>  
            </div>
          </div>
    </div>

使用CSS还是使用JavaScript？

任何帮助或技巧都将不胜感激：）

编辑1：

我的代码中包含此脚本，也许它不是一个很好的版本？

        <div class="modal fade" id="myModal1" role="dialog" >
            <div class="modal-dialog" >
              <div class="modal-content"style="background-color: rgba(0,0,0,0) !important;border-style: none; box-shadow: none;">
                    <h4 style="color: white !important;">Nature morte à l'écrevisse</h4>
                    <img src="img/1.jpg" class="" style="width:100%;" alt="Peinture à huile clair obscur">
                    <p style="color: white !important;">150x120 cm avec cadre -  A Vendre</p>
              </div>  
            </div>
          </div>

这是我的网站的链接：https://www.vmbringer.fr/

Answer 1

尝试使用show.bs.modal事件来取消模式显示：

$('#myModal').on('show.bs.modal', function (e) {
    if ($(window).height() < 970) {
        e.preventDefault();
        $(this).modal('hide');
    }
});

Answer 2

您可以将事件处理程序附加到模态显示事件（show.bs.modal）。如果您从事件处理程序中返回false，则不会显示模式，因此您可以检查用户代理，如果代理匹配则返回false。

$(".modal").on('show.bs.modal', function(e){
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    e.preventDefault();//Works from Bootstrap 3.0.0
    return false;
  }
});

编辑

这是一个JSFiddle：https://jsfiddle.net/tmvj7xk9/

在小提琴中，我使用宽度进行移动检测，因为它更易于测试。

编辑2

根据documentation，从3.0.0版本开始，所有不定式的引导事件都提供preventDefault功能。这样就可以在动作开始之前停止执行。

编辑3 阻止模式的另一种方法是在触发元素上单击时添加一个侦听器，然后在那里取消事件。

$(document).ready(()=>{
    $('body').on('click', '[data-toggle="modal"]', function (e) {
        if ($(window).width() < 900) {
            e.preventDefault();
            e.stopPropagation();
            return false;
        }
    });
});

禁用小屏幕模式

2 个答案: