0

ページ上で div が強調表示されるページ チュートリアルのようなものを構築しようとしています。通常はオーバーレイの上に表示されるモーダル ダイアログがあります。ただし、私がやりたいことは、モーダル ダイアログをオーバーレイの後ろに置き、そのモーダル内の特定の div を前面に表示することです。

これが私のコードのJSフィドルです。

div をオーバーレイの上に表示するにはどうすればよいですか?

CSS:

    .overlay 
     {  
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:1000;
        background-color:#000000;
        opacity:0.7;    
    }

    .modal
    {    
        position:absolute;
        top:300px;
        left:50%;
        z-index:999;
        overflow:auto;
        margin:-250px 0px 0px -280px;
        border:1px solid #999;
        background-color:#fff;
        border-radius:6px;
        -webkit-border-radius:6px;
        -moz-border-radius:6px;
        -webkit-box-shadow:0 3px 7px rgba(0,0,0,0.3);
        -moz-box-shadow:0 3px 7px rgba(0,0,0,0.3);
        box-shadow:0 3px 7px rgba(0,0,0,0.3);
        background-clip:padding-box;
        padding:10px;
    }

    .highlight
    {
        z-index:1002;
        position:relative;
        background-color:#ffffff;
    }

.modal-contents
{
    height:100px;
    min-width:100px;
}



.section
{
    padding:5px;
}

html:

<body>
    <div class="overlay"></div>       
    <div class="modal">
        <h1>Modal Window</h1>
        <div class="modal-contents">
            <div class="section highlight">
                This div should be highlighted above the overlay!
            </div>
            <div class="section">
                This is section two
            </div>            
        </div>
    </div>       
</body>
4

1 に答える 1

0

すべての z-index 値とモーダル要素の白い背景を削除します http://jsfiddle.net/TfSa5/

 .overlay 
 {  
position:fixed;
top:0;
left:0;
right:0;
bottom:0;

background-color:#000000;
opacity:0.7;    
}

.modal
{    
position:absolute;
top:300px;
left:50%;

overflow:auto;
margin:-250px 0px 0px -280px;
border:1px solid #999;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.3);
-moz-box-shadow:0 3px 7px rgba(0,0,0,0.3);
box-shadow:0 3px 7px rgba(0,0,0,0.3);
background-clip:padding-box;
padding:10px;
}

.modal-contents
{
height:100px;
min-width:100px;
}

.highlight
{
position:relative;
background-color:#ffffff;
}

.section
{
padding:5px;
}
于 2013-06-18T09:30:23.117 に答える