jQueryでモーダルウィンドウ

「作りながら学ぶ jQueryデザインの教科書」より

モーダルウィンドウの実装

完成イメージ

モーダル出現を押すとモーダルが出てくる

モーダルのイメージ

ソースコード

解説は後日

modal.html

<a herf="#" class="show-modal">モーダル出現</a>
<div id="modalwin" class="modalwin hide">
    <a herf="#" class="modal-close"></a>
    <h1>タイトル</h1>
    <div class="modalwin-contents">
        <img src="img/nomad_surfing_nangoku.png">
        <p>テキスト</p>
        <button>閉じる</button>
    </div>
</div>

modal.css

        /*▼▼▼モーダル▼▼▼*/

        .modalwin {
            position: fixed;
            width: 600px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 4px 0 #000;
            z-index: 1;
        }

        .modalwin dl {
            padding: 0px 10px;
        }

        .show {
            display: block;
        }

        .hide {
            display: none;
        }

        .modalwin h1 {
            background: #ededed;
            padding: 20px;
            border-radius: 5px 5px 0 0;
            font-size: 1.2em;
            margin-top: 0;
            text-align: center;
        }

        .modalwin-contents {
            padding: 5px;
        }

        .modalwin-contents img {
            margin: 0 0 1em 0;
            float: left;
            width: 30%;
            height: 30%;
        }

        .modalwin-contents p {
            margin: 0 0 1em 0;
            line-height: 1.8em;
        }

        #shade {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #999;
            opacity: 0.9;
            z-index: 1;
        }

        @media screen and (max-width: 600px) {
            .modalwin {
                width: 90%;
            }
        }

modal.js

    $(function () {
        // モーダルウィンドウを開く
        function showModal(event) {
            event.preventDefault();

            var $shade = $('<div></div>');
            $shade
                .attr('id', 'shade')
                .on('click', hideModal);


            var $modalWin = $('#modalwin');
            var $window = $(window);
            var posX = ($window.width() - $modalWin.outerWidth()) / 2;
            var posY = ($window.height() - $modalWin.outerHeight()) / 2;

            $modalWin
                .before($shade)
                .css({left: posX, top: posY})
                .removeClass('hide')
                .addClass('show')
                .on('click', 'button', function () {
                    hideModal();
                });
        }

        function hideModal() {
            $('#shade').remove();
            $('#modalwin')
                .removeClass('show')
                .addClass('hide');
        }

        $('.show-modal').on('click', showModal);

    }());