Question

我有一个显示项目列表的网页。当用户点击其中一个项目时，它会显示有关该项目的信息。对于移动用户，我希望它能够显示一个弹出的模式对话框，并且（几乎）填满了屏幕 - 显示了很多信息。对于桌面，我希望此信息显示在项目列表旁边。

有没有人知道如何设计这个尽可能少的混乱，理想情况下使用最少的样式来使其与Bootstrap一起使用，最好是使用最少的显式Javascript？我对媒体查询很熟悉，但是没有复制粘贴bootstrap.css的大块内容，我不确定如何解决这个问题。

Answer 1

<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();
    }
}

响应式CSS / Bootstrap：显示小屏幕的模态对话框，否则显示块元素

1 个答案: