Question

我在单页应用上有一个模态，当用户执行某个操作时会弹出该模式。如果用户按下其中一个按钮（是/否），模态将关闭。如果再次弹出相同的模态，则最后按下的按钮保持活动状态。我使用伪类:active来更改按下时的按钮背景。

这在某些Android触控设备上会发生。

HTML：

<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <p class="modal-title" data-bind="lang: Title"></p>
            </div>
            <div class="modal-body" data-bind="lang: Body">
            </div>
            <div class="modal-footer">
                <div class="exitFooterButtons">
                    <div class="ExitButton">
                        <div data-event="yes" data-bind="lang: 'Modal.Yes'"></div>
                    </div>
                    <div class="ExitButton" data-event="no" data-bind="lang: 'Modal.No'"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

modal .modal-content .modal-footer .ExitButton {
    line-height: 54px;
    width: 50%;
    display: table-cell;
    border-top: 1px solid black;
    cursor: pointer;
    font-size: 18px;
    height: 54px;
    border: 0;
    margin: 0;
    float: left;
    color: #c6c6c6;
    border-radius: 0;
    background: url(../Images/headerRowBackground.png) repeat-x; 
}

并且：活跃

modal .modal-content .modal-footer .ExitButton:active {
    background: url(../Images/reverseHeaderRowBackground.png) repeat-x;
}

如果我第一次按NO，然后第二次返回模态，则NO仍然有效。如果我再按YES并再次返回，则两者都处于活动状态。

Answer 1

我设法通过用buttons

替换div来解决这个问题

        <div class="exitFooterButtons">
            <div class="ExitButton">
                <button data-event="yes" data-bind="lang: Languages.Yes"></button>
                <button data-event="no" data-bind="lang: Languages.No"></button>
            </div>
        </div>

总之，一些android（~4.2）设备在被:active分配时不喜欢div's伪类。

如何防止元素保持活跃？

1 个答案: