javascript - 响应式 CSS/Bootstrap : Show modal Dialog for small screen, 否则显示 block 元素

标签 javascript jquery html css twitter-bootstrap

我有一个显示元素列表的网页。当用户单击这些元素之一时,它会显示有关该元素的信息。对于移动用户,我希望它显示一个模式对话框,弹出并(几乎)填满屏幕——有很多信息要显示。对于台式机,我希望此信息显示在元素列表旁边。

有谁知道您可以如何以尽可能少的困惑来设计它,理想情况下使用尽可能少的样式使其与 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/

相关文章:

附加为类属性时,Javascript 字符串按空格分隔

javascript - Angular - 在 localStorage 中存储和读取带有状态的复选框列表

javascript - 如何在 karma 测试中使用 console.log 检查函数

javascript - 用于 ping 和协商的下划线参数

javascript - 单击更改按钮文本,延迟问题

javascript - 为什么 Flickr public feed API 在通过 jQuery 访问时在显示照片结果之前返回 "undefined"?

javascript - 如何纠正在以下情况下加载 HTML 页面内容时出现的问题?

javascript - jquery 创建选择,并在更改时触发

html - 如何让 HTML 读取段落中的空白区域?

javascript - UI 开发 - JavaScript 与 Ajax