理想的なモーダル実装
概要
理想的なモーダルを実装してみました。 下記の条件を満たしました。
実装
index.html
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="./styles.css"> <meta charset="utf-8" /> <title>Ideal Modal</title> </head> <body> <button>Open Modal</button> <div class="outer"> <div class="inner"> <div class="inner-inner"> <p class="content">This is an ideal modal</p> <a class="close"></a> </div> </div> </div> </body> </html>
styles.css
.outer { display: flex; justify-content: space-around; align-items: center; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background: rgba(0, 0, 0, 0.5); } .inner { position: relative; } .inner-inner { max-height: 95vh; background: #fff; border-radius: 10px; overflow: auto; width: 600px; } .content { text-align: center; padding: 50px; font-size: 40px; } .close { position: absolute; top: -30px; right: -30px; width: 60px; height: 60px; background: url(./close-button.png) center/cover no-repeat; }
効果