javascript - anchor 标记弹出一个 div 而不是一个新页面

Question

我想知道如何实现一个有自己地址的弹出式 div。有问题的例子是 Chrome 扩展商店:https://chrome.google.com/webstore/category/extensions

如果您单击该站点上的某个图 block ，不仅内容会以 div 形式弹出，而且还会有自己的地址。因此，如果我复制地址并将其粘贴到新窗口中，它会转到相同的弹出窗口。不仅如此，如果您单击后退按钮(或退格键)，它会关闭弹出式 div 而不是返回到上一页。

如果没有简单的方法来实现它，我想知道什么 javascript 对象或我必须学习的东西才能做到这一点。

我不确定这是否是正确的 S.E.论坛问，但我不得不问别人。

Answer 1

您可以使用引导模式。非常好

这是代码，

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>