0

我想为小屏幕禁用/停用模式。我尝试Class="hidden-xs"与 Bootstrap 一起使用，这使我的模态无效但阻止了我的屏幕。

我的HTML：

  <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>

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

        <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>

使用 CSS 还是使用 JavaScript？

任何帮助或提示将不胜感激:)

编辑 1：

我的代码中有这个脚本，也许它不是一个好的版本？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

4

2 回答 2

2

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

$('#myModal').on('show.bs.modal', function (e) {
    if ($(window).height() < 970) {
        e.preventDefault();
        $(this).modal('hide');
    }
});
于 2019-06-16T19:22:12.020 回答
1

您可以将事件处理程序附加到模式显示事件 ( 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

根据文档，从 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;
        }
    });
});
于 2019-06-16T19:24:37.110 回答