javascript - 根据屏幕大小将引导模式更改为静态 div
问题描述
我正在开发一个类似应用程序的单页网站,其中包含用户可以单击的项目列表,以获取有关该项目的更多信息。在移动版本上,我希望此信息以模式弹出,但在桌面(更大屏幕)版本上,我希望信息填充内容区域的中心/右侧部分。
我考虑了一些事情,但它们看起来都有些笨拙:使用@media 和屏幕剥离(归零)或添加模态和 div 样式,使用 javascript 根据屏幕大小删除/添加模态类。当它们工作时,我想知道是否有办法用 CSS 干净地做到这一点,以便其他位的 javascript 正常运行,而无需在更新 div(或触发模式)之前执行检查屏幕大小之类的操作。
解决方案
试试这个代码。
这是jsfiddle链接
.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">×</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>
推荐阅读
- r - 如何在绘制等高线图时为二元分布(x-mu => 0)和(x-mu <0)添加条件?
- java - 我做的代码有问题吗?
- linux - 如何根据文件的数量将文件夹的内容复制到多个文件夹?
- javascript - YTPlayer 背景视频不自动播放
- c++ - For Loop 无法正确打印
- c# - Cannot update DataGridView cell via DataBoundItem?
- c# - 如何使用 Selenium 和 C# 修复测试自动化代码?
- python - psycopg2.OperationalError:致命:数据库“新闻”不存在
- jwt - 在 rfc7515 的第 3.3 节中无法获得相同的签名
- regex - 我正在使用 vuetify,我有一个 v-text-field,它应该只接受数字。如何使用正则表达式验证这一点?