クリック時のHTMLボタンオーバーレイレイヤーを表示

Question

ボタンをクリックしたときにフルページのオーバーレイを表示しようとしています。私はポップアップのためにコンテンツdivにiframeを追加しようとしました。ここに私のHTMLは次のとおりです。

とCSSのオーバーレイを表示し、非表示にする：

.box { 
 
    width: 20%; 
 
    margin: 0 auto; 
 
    background: rgba(255,255,255,0.2); 
 
    padding: 35px; 
 
    border: 2px solid #fff; 
 
    border-radius: 20px/50px; 
 
    background-clip: padding-box; 
 
    text-align: center; 
 
} 
 

 
.button { 
 
    font-size: 1em; 
 
    padding: 10px; 
 
    color: #fff; 
 
    border: 2px solid blue; 
 
    border-radius: 20px/50px; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    transition: all 0.3s ease-out; 
 
} 
 
.button:hover { 
 
    background: blue; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    transition: opacity 500ms; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
} 
 
.overlay:target { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 

 
.popup { 
 
    margin: 70px auto; 
 
    padding: 20px; 
 
    background: #fff; 
 
    border-radius: 5px; 
 
    width: 30%; 
 
    position: relative; 
 
    transition: all 5s ease-in-out; 
 
} 
 

 
.popup h2 { 
 
    margin-top: 0; 
 
    color: #333; 
 
    font-family: Tahoma, Arial, sans-serif; 
 
} 
 
.popup .close { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 30px; 
 
    transition: all 200ms; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    color: #333; 
 
} 
 
.popup .close:hover { 
 
    color: orange; 
 
} 
 
.popup .content { 
 
    max-height: 30%; 
 
    overflow: auto; 
 
}

<div style="height: 1200px;"> 
 

 

 
<div class="box"> 
 
\t <a class="button" href="#popup1">Show Overlay</a> 
 
</div> 
 

 
<div id="popup1" class="overlay"> 
 
\t <div class="popup"> 
 
\t \t <h2>Title</h2> 
 
\t \t <a class="close" href="#">×</a> 
 
\t \t <div class="content"> 
 
\t \t \t Content 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
</div>

マイjsfiddle

しかし、スタイリングと若干の問題があります。下にスクロールするとき、オーバーレイは下の部分をカバーしません。それはスクロールダウンを開始する前に部品をカバーするだけです。私は高さを100％に設定しようとしましたが、無駄にはなりませんでした。

これを修正する方法はありますか？

ありがとうございます！

Answer 1

position: absolute;の代わりにposition: fixed;を使用してください。位置absoluteは、本体の高さに基づいて自動高さを設定します。

.box { 
 
    width: 20%; 
 
    margin: 0 auto; 
 
    background: rgba(255, 255, 255, 0.2); 
 
    padding: 35px; 
 
    border: 2px solid #fff; 
 
    border-radius: 20px/50px; 
 
    background-clip: padding-box; 
 
    text-align: center; 
 
} 
 

 
.button { 
 
    font-size: 1em; 
 
    padding: 10px; 
 
    color: #fff; 
 
    border: 2px solid blue; 
 
    border-radius: 20px/50px; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
.button:hover { 
 
    background: blue; 
 
} 
 

 
.overlay { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    transition: opacity 500ms; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
} 
 

 
.overlay:target { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 

 
.popup { 
 
    margin: 70px auto; 
 
    padding: 20px; 
 
    background: #fff; 
 
    border-radius: 5px; 
 
    width: 30%; 
 
    position: relative; 
 
    transition: all 5s ease-in-out; 
 
} 
 

 
.popup h2 { 
 
    margin-top: 0; 
 
    color: #333; 
 
    font-family: Tahoma, Arial, sans-serif; 
 
} 
 

 
.popup .close { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 30px; 
 
    transition: all 200ms; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    color: #333; 
 
} 
 

 
.popup .close:hover { 
 
    color: orange; 
 
} 
 

 
.popup .content { 
 
    max-height: 30%; 
 
    overflow: auto; 
 
}

<div style="height: 1200px;"> 
 

 

 
    <div class="box"> 
 
    <a class="button" href="#popup1">Show Overlay</a> 
 
    </div> 
 

 
    <div id="popup1" class="overlay"> 
 
    <div class="popup"> 
 
     <h2>Title</h2> 
 
     <a class="close" href="#">×</a> 
 
     <div class="content"> 
 
     Content 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>