javascript - 如何用 jQuery 创建固定对话框？

Question

给你一个众所周知的例子更容易:

如果您使用 Google 登录，则可以单击右上角的个人资料图标，然后会出现一个类似对话框。我怎样才能做类似的事情？我猜它可能是用 jQuery 制作的。我发现最重要的是你创建了一个带有切换功能的div，但这不是最好的，因为它会下推整个页面内容。

而且它似乎也不是一个简单的 JavaScript 提示...(但我没有足够的经验来判断它...)

你知道如何创建这样的东西吗？谢谢!!

Answer 1

这是一个如何使用 jQuery 执行此操作的简单示例。

$('.button').on('click', function() {
  $('.hoverelement').toggle();
});

.hoverelement {
  display: none;
  border: solid 1px;
  background-color: #fff;
  width: 200px;
  text-align: left;
  position: relative;
  top: 10px;
  z-index: 10;
}
.container {
  position: absolute;
}
.othercontent {
  position: absolute;
  top: 50px;
  z-index: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="button">Button</div>
  <div class="hoverelement">
    <h1>your content here</h1>
    <p>put some content here</p>
  </div>
</div>
<div class="othercontent">
  other content
  <br />other content
  <br />other content
  <br />other content
  <br />other content
  <br />other content
  <br />other content
  <br />other content
  <br />other content
  <br />other content
  <br />other content
  <br />other content
  <br />other content
  <br />
</div>