Question

我查看了各种示例（哪些有效），并查看了我自己的代码。我不完全确定，但无论出于何种原因，我都无法看清我做错了什么。我可能需要另一个人来为我看一遍并告诉我，我是愚蠢的。我错过了什么？

代码（使用HTML数据属性）：

<div class="col col-md-6">
  <figure>
    <a data-toggle="modal" data-target="myModal1" href="#">
      <img src="http://placehold.it/150" class="img-responsive img-rounded center-block" aria-describedby="year6saratogareads.500x320.jpg1476812731">
    </a>
    <figcaption id="year6saratogareads.500x320.jpg1476812731" class="text-center">Image Description</figcaption>
  </figure>
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel1">Image 1</h4>
      </div>
      <div class="modal-body">
        <img src="http://placehold.it/500">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

就像在小提琴中一样，Bootstrap CSS和JS也存在。但是，单击图像似乎不会打开模态。 Bootstrap中的模态非常简单，我不完全确定我是如何搞砸它的。帮助

Answer 1

在Bootstrap文档中似乎有一个拼写错误。数据目标需要有一个＃来标识目标HTML ID属性。

通过：bootstrap 3 modal window not working

找到

这里还有另一个问题，显然如果从链接激活模式，并且该链接包含HREF标记中的某些内容，Bootstrap会尝试将链接数据加载到模态体中（忽略数据目标）。这最终试图在ascii介质中显示（在这种情况下）二进制数据。在加载/转换时，它几次崩溃了我的浏览器。

要仅使用HTML数据属性，必须删除锚标记的HREF（如果JS中断或用户无法使用，则禁用备份）。否则，必须使用JS代替数据属性来激活模态。

Bootstrap 3 Modal（图像灯箱）

1 个答案: