我有一个显示元素列表的网页。当用户单击这些元素之一时,它会显示有关该元素的信息。对于移动用户,我希望它显示一个模式对话框,弹出并(几乎)填满屏幕——有很多信息要显示。对于台式机,我希望此信息显示在元素列表旁边。
有谁知道您可以如何以尽可能少的困惑来设计它,理想情况下使用尽可能少的样式使其与 Bootstrap 一起工作,并且最好使用最少的显式 Javascript?我熟悉媒体查询,但由于没有复制粘贴大块的 bootstrap.css,所以我不确定该怎么做。
最佳答案
<a class="link" href="#">Toggle thingie</a>
<div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
if (!('ontouchstart' in document.documentElement)) {
// desktop
$('#myModal').hide();
}
$('.link').on('click', function (e) {
e.preventDefault();
if ('ontouchstart' in document.documentElement) {
// mobile or tablet: do modal thingie
$('#myModal').modal('toggle');
} else {
// desktop
$('#myModal').show();
}
}
关于javascript - 响应式 CSS/Bootstrap : Show modal Dialog for small screen, 否则显示 block 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26313096/