不知道这个弹出窗口叫什么

Question

我想制作一个这样的弹出窗口。当用户单击其上方按钮时，将弹出图像。

实际上，我真的不知道它叫什么，所以我找不到帮助我这样做的链接。

因此，非常感谢任何链接或帮助。

感谢。

Answer 1

查看我的simple demo。它只是从头开始写的。

您只需要一个按钮（可见）和“弹出窗口”（隐藏）。现在，您添加一个事件侦听器来检查是否单击了按钮并淡入/淡出“弹出窗口”。

$(document).ready(function() {
  $('#columns').on('click', function() {
    $('#selector').fadeToggle(750);
  });
});​

Answer 2

检查此处的代码 - http://jsfiddle.net/h7pxU/

您只需切换/显示隐藏div

即可

$('.link').click(function(){
    $('.popup').toggle();
});

.popup必须与position: absolute合并，其父级必须为position: relative

希望这有帮助！

Answer 3

这link可能有所帮助。它显示了许多带有源代码的不同示例。

Answer 4

您可以在此处使用qTip，http://craigsworks.com/projects/qtip/demos/ 它很好用，很容易使用。您可以使用html代码创建qtip

Answer 5

这是一个非常基本的演示，它使用没有任何库的普通JavaScript。请注意，{1}}和document.querySelector未在IE早期版本9中实现，因此您可能希望使用jQuery或其他JS-Framework。

HTML

首先，您需要正确的结构。你需要一个包装器，按钮和菜单：

addEventListener

CSS

现在我们需要设置这些元素的样式

<div class="menuwrapper">
    <button>Click me!</button>
    <div class="menu">
        <label><input type="checkbox"> Auto-save this page</label>
        <label><input type="checkbox"> Make this page private</label>
        <label><input type="checkbox"> Hide notifications</label>
    </div>
</div>

的JavaScript

现在需要为所有包装器添加一个事件监听器。

.menuwrapper{
    overflow:none;
    position:relative; // this will have an effect on the absolute position later on
}
.menuwrapper > button{
   border: 1px solid;  // style the way you want it
}

.menuwrapper > div{
   border: 1px solid;  // again, style the way you want it
   display:none;       // hide the div
   position: absolute; // use absolute positioning
   top:110%;           // place it about 10% of the containing container's height below it
   z-index:2;          // place it above other elements
}


.menuwrapper> div > label{
   display:block;      // again, customize this.
}

JSFiddle Demo

另见：

• MDN：element.querySelector