如何在图像中显示弹出屏幕？

Question

我正在制作一个弹出屏幕的演示，如图所示。我有一些问题我的三角形看起来是“v”..如何弹出选项按钮上方？我们可以和上面的节目一样。我的弹出窗口位于按钮下方。它应该高于按钮？

.triangle {
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left: -15px;
    border-bottom: 15px solid #002952;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
.menu{
    height:200px;
    overflow:auto;
}
}

http://jsfiddle.net/jHjDL/1/

Answer 1

所以我看着你的小提琴和this is the best edit I can come up with：

<div style='position:relative;'>
    <div style='position:fixed; bottom:0px;'> <a href="#menuPopUp" data-rel="popup" id="btn1" data-icon="gear" class="ui-btn-right" data-mini="true">Options</a>

        <div data-role="popup" id="menuPopUp">
            <ul data-role="listview" class="menu">
                <li data-icon="false"><a href="#">Edit</a>
                </li>
                <li data-icon="false"><a href="#">Call</a>
                </li>
                <li data-icon="false"><a href="#">SMS</a>
                </li>
                <li data-icon="false"><a href="#">Edit</a>
                </li>
                <li data-icon="false"><a href="#">Call</a>
                </li>
                <li data-icon="false"><a href="#">SMS</a>
                </li>
            </ul>
            <div class="triangle"></div>
        </div>
    </div>
</div>

我冒昧地添加了一些包装器并将选项链接推到页面底部，以便菜单可以超越它。 JQuery UI自己处理这个问题，没有什么特别需要做的就是让它显示在链接上方，链接只需要在菜单可以弹出的页面中。

之后我对css进行了一些小改动以反转箭头：

.triangle {
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -15px;
    border-top: 15px solid #002952; /*<-- make it border top to make a down arrow */
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}

现在它似乎做了你想要它做的事情。我注意到的一件事是，当你重新调整窗口大小时，菜单的位置会变得很有趣。我认为这是UI弹出窗口的一个怪癖，只有在使用自定义CSS显示它时才能修复。