Question

更容易为您提供一个众所周知的例子：

如果您使用Google登录，则可以单击右上方的个人资料图标，然后会出现一个对话框。我怎么能做类似的事情？我想这可能是用jQuery制作的。我发现关闭的东西是你用toggle函数创建一个div，但它不是最好的，因为它会压缩整个页面内容。

它似乎也不是一个简单的javascript提示......（但我没有经验可以判断它......）

你知道怎么创造这样的东西吗？谢谢!!

Answer 1

这是一个如何使用jQuery做的简单示例。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

试试这个并放置个人资料图片

＆＃13;

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

＆＃13;

.hoverelement {
  display: none;
  border: solid 1px;
  width: 200px;
  text-align: left;
  position: absolute;
  z-index: 999;
  top: 100px;
}
.container {
  position: relative;
  top: 45px;
  float: right;
  text-align: right;
}
img {
   width: 100px;
    
      }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img src="http://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png" alt=""/>
  <div class="hoverelement">
    <h1>your content here</h1>
    <p>put some content here</p>
  </div>
</div>

＆＃13;

Answer 3

首先，当用户点击某个图标时，您应该得到它的坐标left,top我不确定，但您可以使用$icon.offset()

现在您可以在对话框的左侧和顶部执行操作：

var $dialog_div = $("<div></div>"); //make new item

// make sure it floats and not pushing other contents of the pge 
$dialog_div.css("position","absolute"); 

$dialog_div.css("z-index","9999"); // or some big number to be above all content
$dialog_div.css("left",left); // the left you got from icon offset
$dialog_div.css("top",top); // the top you got from icon offset

/////// append some content to the dialog and add some css classes 


$("body").append($dialog_div); //finally append it to the body

我希望这有助于进行你想要的对话。

但最好使用像jqueryUi或Bootstrap之类的某些库

如何用jQuery创建一个固定的对话框？

3 个答案: