Question

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

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

如果没有简单的方法来实现这一点，我想知道javascript对象或我必须要学习的东西。

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

Answer 1

您可以使用bootstrap模式。它非常好

这是代码，

＆＃13;

<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>

＆＃13;

Answer 2

我没有看到你正在谈论的链接，但我认为他们破解了链接的行为，而不是去点击的网址显示弹出div上的内容。在jquery中，你可以通过preventDefault

之类的东西来实现

Answer 3

如果您点击该网站上的图块，则不仅会弹出内容 div的形式，但它也有自己的地址。所以如果我复制了将它地址并粘贴到一个新窗口，它会转到同一个弹出窗口。

这称为无状态UI，可以使用例如Angular或Ember中的路由器轻松实现。

这个想法是应用程序中的每个状态都有自己的地址。例如，如果您的应用程序具有实体user，那么查看特定用户的网址将为

http://example.com/user/12345

其中12345是userId

同时打开此对象的编辑表单，您可以使用

http://example.com/user/12345/edit

与您到达后者的时间无关，您的应用程序将始终为id=12345

的用户打开一个编辑表单

为了更好地理解这一点，您需要熟悉sum的一些原则，并将MVC作为实施的一个例子进行检验

锚标签会弹出div而不是新页面

3 个答案: