モーダルウィンドウを作る

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>modal-window.html</title>
        <style>
            .wrapper {
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .wrapper a {
                display: inline-block;
                text-decoration: none;
                padding: 15px;
                background-color: #fff;
                border-radius: 3px;
                color: #ccc;
            }

            .modal {
                visibility: hidden;
                opacity: 0;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(77, 77, 77, .7);
                transition: all .4s;
            }

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

            .modal__content {
                border-radius: 4px;
                position: relative;
                width: 500px;
                max-width: 90%;
                background: #fff;
                padding: 1em 2em;
            }

            .modal__close {
                position: absolute;
                top: 10px;
                right: 10px;
                color: #ccc;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <a href="#modal-window">モーダルウィンドウ</a>
        </div>

        <div id="modal-window" class="modal">
            <div class="modal__content">
                <h1>モーダルウィンドウ</h1>
                
                <p>
                    <img src="https://picsum.photos/500">
                </p>
                
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                
                <a href='https://saycon.co.jp/'>セイ・コンサルティング・グループのサイトへ</a>

                <a href="#" class="modal__close">×</a>
            </div>
        </div>
    </body>
</html>

モーダルウィンドウを作る 最後までお読みいただきありがとうございます。

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します!