1

だから、私は満足している純粋な CSS モーダル ウィンドウを持っています。軽くて速い。ただし、javascriptでしか実現できないと思われる特定の機能を追加したいと思います。つまり、エスケープキーでモーダルの非表示をトリガーし、オーバーレイをクリックして同じことを行います。

純粋な css モーダルであるため、:target 疑似属性に依存しているため、URL に依存しています。だから、私はこれを試すことにしました：

document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
history.go(-1);
}
};

ただし、それをドキュメント ヘッドにロードすることで、モーダルが画面上にあるかどうかに関係なく、ESC は back イベントをトリガーします。モーダルが表示されているときに押された場合にのみ、ESC が戻るイベントをトリガーするようにします。 どうすればそれを達成できますか?

ちなみにモーダルのcssはcontainerdisplay属性を からnoneに変更していますblock。

.modalWrap {
    display:none;
    z-index:40001;
}
    #dbw.modalWrap:target {
        display: block;
    }

HTML:

<div class="modalWrap" id="dbw">
    content
</div>
4

2 に答える 2

1

どういうわけか、私は実際に解決策を見つけることができました：

window.document.onkeydown = function (e)
    {
        if (!e) e = event;
        if (e.keyCode == 27)
          var elem = document.getElementById("dbw");
            if (elem.currentStyle) {
                var displayStyle = elem.currentStyle.display;
            } else if (window.getComputedStyle) {
                var displayStyle = window.getComputedStyle(elem, null).getPropertyValue("display");
            }
        if (displayStyle != 'none') {
            history.go(-1);
        }
    }

ESC を押すと、id "dbw" の div の表示スタイルが取得され、それが と等しくない場合none、back イベントがトリガーされます。テスト済みで、問題なく動作します。

誰かがよりクリーンで短いコードを提供した場合、私はその回答を承認済みとしてマークします。

于 2013-02-14T19:28:04.797 に答える
1 
document.onkeydown = function (evt) {
    if (document.getElementById(modal_id).style.display != 'none') {
        evt = evt || window.event;
        if (evt.keyCode == 27) {
            history.go(-1);
        }
    }
};

Modalプロパティを参照して が画面上にあるかどうかを評価しdisplayます。

于 2013-02-14T16:43:48.180 に答える