用途
新着
履歴
分類

CSS アニメーション付きモーダル作成

CSS アニメーション付きモーダル作成
CSSだけでアニメーションのエフェクト付きのモーダルウィンドウを作成するサンプルです。

JavaScriptが苦手、あるいは使えない状況でも、モーダルの表現が可能です。

探すと素っ気ないモーダルはあるのですが、アニメーションの演出が付いているものがなかったので、作成しました。

スタイルシートの:targetがポイントになります。

まずはこちらをクリック。

モーダルを開く

aタグなので、URLに「#demo_modal」が付きます。


<a href="#demo_modal">モーダルを開く</a>


<div class="modal_box" id="demo_modal">
    <a href="#" class="close_bg"></a>
    <div class="modal_body">
        <a href="#" class="close">×</a>
        モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。
    </div>
</div>

HTMLはこうなっています。

次にCSSです。


.modal_box {
    display: none;
}

.modal_box:target {
    z-index:100;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal_box .modal_body {
    width: 300px;
    position: fixed;
    padding: 20px;
    background-color: #FFF;
    border-radius: 10px;
    top: 40%;
}

.modal_box:target .modal_body {
    animation: anime1 1s ease ;
}

@keyframes anime1 {
0% {
        top:45%;
        opacity: 0;
    }
100% {
        top:40%;
        opacity: 1;
    }
}

.modal_box .close {
    position: relative;
    display: block;
    text-decoration: none;
}
.modal_box:target .close {
    animation: anime2 2s ease ;
}
@keyframes anime2 {
0% {
        opacity: 0;
    }
50% {
        opacity: 0;
    }
100% {
        opacity: 1;
    }
}

.modal_box .close {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  cursor: pointer;
}

.modal_box:target .close_bg {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,0.7);
  cursor: pointer;
}   
公開 2020-06-23 23:59:09
更新 2022-01-31 01:45:57
このページの二次元コード
CSS アニメーション付きモーダル作成

人気のサンプル

search -  category -  about
© 2024 kipure
Top