0

我想做一个这样的弹出窗口。当用户单击上面的按钮时，图像将弹出。 在此处输入图像描述

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

因此，任何链接或帮助将不胜感激。

谢谢。

4

4 回答 4

3

请参阅我的简单演示。它只是从头开始写的。

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

$(document).ready(function() {
  $('#columns').on('click', function() {
    $('#selector').fadeToggle(750);
  });
});​
于 2012-06-01T07:59:35.810 回答
1

检查这里的代码 - http://jsfiddle.net/h7pxU/

您可以通过简单地切换/显示隐藏 div 来做同样的事情

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

.popup 需要与position: absolute它的父级必须有position: relative

希望这可以帮助！

于 2012-06-01T07:53:31.150 回答
1

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

于 2012-06-01T07:57:40.413 回答
1

这是一个非常基本的演示，它使用纯 JavaScript，没有任何库。请注意，在 IE 之前的版本 9 中document.querySelector并addEventListener没有实现，因此您可能需要使用 jQuery 或其他 JS-Framework。

HTML

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

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

CSS

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

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

JavaScript

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

var results = document.querySelectorAll(".menuwrapper"); // save all menues
var i; // index
for(i = 0; i < results.length; ++i){
    // for every menuwrapper, add an listener
    results[i].addEventListener('click',function(e){
        // make the contained menu visible
        this.querySelector(".menu").style.display = 'block';

        // stop the event from propagation
        e.stopPropagation();
    });
}

// Almost the same, but if anything outside of the
// menuwrapper is clicked then all menus should be closed.
window.addEventListener('click',function(){
    var i;
    var results = document.querySelectorAll(".menuwrapper .menu");
    for(i = 0; i < results.length;  ++i)
        results[i].style.display = 'none';        
});

JSFiddle 演示

也可以看看：

于 2012-06-01T08:11:02.333 回答