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>

根据屏幕尺寸将引导程序模式更改为静态div

1 个答案: