根据屏幕大小将引导模式更改为静态 div

Question

我正在开发一个类似于应用程序的单页网站，其中包含用户可以单击的项目列表，以获取有关该项目的更多信息。在移动版本上，我希望此信息以模式弹出，但在桌面（更大屏幕）版本上，我希望信息填充内容区域的中心/右侧部分。

我已经考虑了一些事情，但它们似乎都有点笨拙：使用带有屏幕的 @media 剥离（清零）或添加模态和 div 样式，使用 javascript 删除/添加模态类，具体取决于屏幕尺寸。当它们工作时，我想知道是否有办法用 CSS 干净地做到这一点，以便其他位 javascript 正常运行，而无需在更新 div（或触发模态）之前执行检查屏幕大小等操作。

Answer 1

试试这个代码。
这是jsfiddle link

.modal,
.modal-backdrop {
  position: static;
}

.modal-backdrop.show {
  opacity: 0;
}

.modal-dialog {
  margin-left: auto;
  margin-right: 20px;
}

@media (max-width: 767px) {
  .modal,
  .modal-backdrop {
    position: fixed;
  }
  .modal-backdrop.show {
    opacity: 0.5;
  }
  .modal-dialog {
    margin: 0 auto;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<div class="container">
  <!-- Button trigger modal -->
  <div class="modal-container">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>

</div>