Question

我有这个按钮，点击它时会显示一个弹出窗口。

弹出窗口是一个div元素，其中display:none开头。单击该按钮时，我将display:block设置为显示弹出窗口。

弹出窗口的垂直位置很好;在调用按钮上方。但是，我无法将下箭头（气泡？）放置在调用按钮中心的方向上。

可以用CSS完成吗？
我也可以使用javascript解决方案，只要我不需要依赖。
我可以改变html的结构。我有的约束是弹出窗口和按钮都必须在同一个容器中。该按钮可以放置在此容器中的任何位置。

也许一些代码会有所帮助：

HTML：

<div id="container">
    <input type="button" id="myButton" value="Click Me!">
    <div class="sf-su-response sf-popup-panel popup">
        Sorry, I don't know :(
    </div>
</div>

CSS：

#container {
    position: relative;
    top: 150px;
    left: 50px;
    width: 300px;
    text-align: right;
    background: tomato;
}

.sf-popup-panel {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    width: 200px;
}

.sf-popup-panel.popup {
    top: auto;
    right: 0;
    bottom: 100%;
    left: auto;
}

.sf-popup-panel.open {
    display: block;
}

.sf-popup-panel.popup.open:before {
    position: absolute;
    display: block;
    content: " ";
    border: 14px solid transparent;
    border-top-color: #ccc;
    top: 100%;
    right: auto;
    left: 50%;
    width: 0px;
    margin-left: -1px;
}

.sf-popup-panel.open:after {
    position: absolute;
    display: block;
    content: " ";
    border: 13px solid transparent;
    border-top-color: white;
    top: 100%;
    right: auto;
    left: 50%;
    width: 0px;
}

.sf-su-response {
    padding: 15px;    
}

JavaScript的：

$('#myButton').click(function(){
    $(".sf-su-response").toggleClass("open");
});

的jsfiddle

http://jsfiddle.net/Ru5aX/

修改从目前为止的答案来看，也许，我的问题不是很清楚。

基本上按钮可以放在父div中的任何位置。我不能在设计时对它的位置做出假设。因此，在设计时将right或left设置为特定值的解决方案对我来说不起作用。

当然，如果我可以以某种方式指定此弹出窗口相对于按钮定位，那将会起作用;但是，我不知道如何:(

EDIT2

这就是我得到的：

Result

这就是我想要的：

Desired

Answer 1

尝试更改如下： -

.sf-popup-panel.popup {
        top: auto;
        right: -70px;
        bottom: 100%;
        left: auto;
    }

Answer 2

这应该可以解决问题：

.sf-popup-panel.popup.open:before,.sf-popup-panel.open:after  {
  right: 40px;
}

不要忘记删除left:50%。

fiddle

Answer 3

试试这个：

.sf-popup-panel {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    width: 200px;
    margin-bottom:10px;
}




.sf-popup-panel.popup.open:before {
    position: absolute;
    display: block;
    content: " ";
    border: 14px solid transparent;
    border-top-color: #ccc;
    top: 100%;
    right: auto;
    left: 80%;
    width: 0px;
    margin-left: -1px;
}

.sf-popup-panel.open:after {
    position: absolute;
    display: block;
    content: " ";
    border: 13px solid transparent;
    border-top-color: white;
    top: 100%;
    right: auto;
    left: 80%;
    width: 0px;
}

Answer 4

所以这是你要问的解决方案。

http://jsfiddle.net/moellerb/vmUuc/

<强>释您的“容器”的设置宽度为300px。由于这是弹出窗口的父元素，因此弹出窗口相对于该容器的空间定位。为了在没有重javascript的情况下跟踪按钮的位置，我会将按钮和弹出包装在另一个包装容器（.btn-wrap）中。将其设置为按钮大小，以便将包含大小保持在按钮的所需区域。

<div id="container">
    <div id="btn-wrap"><!-- add another wrap around your button/popup -->
        <input type="button" id="myButton" value="Click Me!"/>
        <div class="sf-su-response sf-popup-panel popup">
          Sorry, I don't know :(
        </div>
    </div>
    <span class="clear"></span>
</div>

对显示指针的弹出式面板类进行一些调整。这将使指针保持在按钮的中心位置，并保持面板右对齐，就像您在示例中所要求的那样。

#btn-wrap {
    /* you could position it absolute, the popup will follow */
    position:relative;
    float:right;
    /* try any of these alternatives to float:right
    margin-left:100px;
    float:left;
    */

    /*Set the input/button container dimensions = button size*/
    width: 65px;
    height: 20px;
}

.sf-popup-panel.popup.open:before {
    ........
    ....
    right: 13px; /* set right instead of left */
    left: auto;
    width: 0px;
    margin-left: -1px;
}

.sf-popup-panel.open:after {
    ........
    ....
    right: 13px; /* set right instead of left */
    left: auto;
    width: 0px;
}

CSS：水平位置在所需位置弹出一个

4 个答案: