0

この優れたシンプルな投稿では、作成者がHTMLとCSS3のみを使用してモーダルダイアログを作成する方法を説明しています。

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html

Opera 12.12（Opera / 9.80（X11; Linux x86_64）Presto / 2.12.388 Version / 12.12）を除いて、正常に動作します。Operaでは、すべてのクリックが無効になっています。

何が問題になる可能性がありますか？

ありがとう。

4

1 に答える 1

2

問題は、モーダルダイアログが画面全体に表示され、「開く」リンクがこのコンテナ（z-Index）の背後にあるため、クリックできないことです。Operaにはポインタイベント（サポートなし）に問題があるため、クリックがブロックされます。あなたができることは、次のようにdivを非表示にして表示することです。

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:.5;
    background:red;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
    display:none;
}

.modalDialog:target {
    opacity:1;
    display:block;
    pointer-events: auto;
}
于 2013-01-28T12:14:06.657 に答える