モーダルウィンドウを表示するCSS

目的

muragonのカスタマイズ。

リンクをクリックすると子ウィンドウを表示する。

CSS

/* 親ウィンドウ */
#modal {
display : none;
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 10;
}

/* ウィンドウ表示クリック動作 */
#modal:target {
animation-name : FadeIn;
animation-duration : 1s;
animation-iteration-count : 1;
display : flex;
justify-content : center;
align-items : center;
opacity : 1;
}

/* 全体リンク(グレー表示) */
.close_overlay {
display : block;
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : rgba(0, 0, 0, 0.5);
}

/* 子ウィンドウ */
.modal_window {
position : relative;
display : block;
width : 600px;
height : 300px;
background-color : #fff;
color : #333;
z-index : 9999;
}

@keyframes FadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

HTML

<div id="modal">
<a href="#" class="close_overlay"></a>
<div class="modal_window">
文章
</div>
</div>