javascript - 禁用小屏幕模式

Question

我想为小屏幕禁用/停用模态。我尝试将 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/

Answer 1

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

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