Bootstrap 模态仅适用于移动设备

Question

您好，

我创建了一个 bootstrap 3 模式，它可以在我的移动设备上运行，但在我的桌面上，当您单击按钮时它不会打开模式。

我试过调整模态框的大小，甚至调整它的 zindex，但这些都没有解决问题。

有人知道我遇到了什么问题吗？

<div class="container-fluid formbox ">
  <div id="cageModal" class="modal fade" role="dialog" class="col-sm-10 col-sm-offset-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Cage The Great</h4>
        </div>
        <div class="modal-body">
          <iframe width="100%" height="100%" src="https://www.youtube.com/embed/VqghSmwdnpg" frameborder="no" allowfullscreen></iframe>
          <button type="button" class="btn btn-default" data-dismiss="modal">See More</button>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid formbox ">
  <div class="col-xs-12 col-sm-12">
    <h3>Get Familiar with the artists below.</h3>
    <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3">
      <div>  <button type="button" class="btn btn-block btn-info btn-lg" data-toggle="modal" data-target="#cageModal">Cage The Great</button>
      </div>
    </div>
  </div>
</div>

Non-working code on jfiddle

Answer 1

您的代码是正确的。但是您的 bootstrap 引用 (CDN) 不是。

将您对 Bootstrap 的引用替换为最新的。或者更好的是，在本地使用 Bootstrap 并且永远不要触摸它！

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

这是您损坏的 jfiddle，现在可以使用了

Bootstrap 模态仅适用于移动设备

Bootstrap Modal Works On Mobile Device Only

php

desktop

modal-dialog

twitter-bootstrap

bootstrap-modal