0

mainバックエンドによってページの div に読み込まれている html フラグメントがあります。modalリンクがクリックされたときに表示される が含まれています。問題は、modalページ上の他の要素によって隠される可能性があることです。z-indexの要素がdivよりもheader高い場合、その に関係なく が の後ろに表示されるため、 を設定してz-indexも意味がありません。現在、javascript (jQuery) をに使用し、クローンを に追加してから、元のファイルを削除することで問題を解決しています。mainmodalheaderz-indexclonemodalbodymodal. これはハックな回避策のように思われ、潜在的な問題を引き起こす可能性があります。これを行うためのより良い方法はありますか? この問題が発生しないように、モーダルは通常どのように読み込まれますか?

ここに問題の jsfiddle があります: http://jsfiddle.net/kraxF/

これが HTML です。ご覧のとおり、モーダルは DOM ツリーのかなり低い位置にあり、"loaded-by-backend" よりも高い z-index を持っている場合、ヘッダー、フッター、またはメインの要素によって覆われている可能性があります。 .

<div id="container">
    <div id="header">
        Header
    </div>
    <div id="main">
        Main
        <div id="loaded-by-backend">
            <div id="modal">
                Modal
            </div>
        </div>
    </div>
    <div id="footer">
        Footer
    </div>
</div>
4

1 に答える 1

0

CSSを変更できる場合は、から削除position:relativeして#mainください。 http://jsfiddle.net/kraxF/3/

于 2013-03-19T23:08:17.470 に答える