javascript - 如何制作如图所示的弹出屏幕？

Question

我正在制作弹出屏幕演示，如图所示。我有一些问题我的三 Angular 形看起来是“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

所以我看了你的 fiddle 和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 来显示它才能解决。