JavaScript はドラッグ可能なモーダルボックスを実装します

<スタイル>
        * {
            マージン: 0px;
            パディング: 0px;
        }
        .ログインヘッダー{
            幅: 100%;
            テキスト配置: 中央;
            高さ: 30px;
            フォントサイズ: 24px;
            行の高さ: 30px;
            カーソル: ポインタ;
        }
        。ログイン {
            表示: なし;
            幅: 500ピクセル;
            高さ: 280px;
            位置: 固定;
            境界線: 1px #ebebeb solid;
            左: 50%;
            上位: 50%;
            背景: #fff;
            ボックスシャドウ: 0px 0px 20px #ddd;
            zインデックス: 999;
            変換: translate(-50%,-50%);
        }
        .ログインタイトル{
            幅: 100%;
            マージン: 10px 0px 0px 0px;
            テキスト配置: 中央;
            高さ: 40px;
            行の高さ: 40px;
            フォントサイズ: 10px;
            位置: 相対的;
            カーソル: 移動;
        }
        .ログインタイトルスパン{
            位置: 絶対;
            フォントサイズ: 12px;
            右: -20px;
            上: -30px;
            背景色: #fff;
            境界線: 1px #ebebeb solid;
            幅: 40px;
            高さ: 40px;
            境界線の半径: 20px;
        }
        .ログイン入力コンテンツ{
            上マージン: 20px;
        }
        .ログインボタン{
            幅: 100ピクセル;
            マージン: 30px 自動 0px 自動;
            行の高さ: 40px;
            フォントサイズ: 14px;
            境界線: 1px #ebebeb solid;
            テキスト配置: 中央;
        }
        {
            テキスト装飾: なし;
            色: #000;
        }
        .ログインボタン a {
            表示: ブロック;
        }
        .ログイン入力 入力.リスト入力 {
            フロート: 左;
            行の高さ: 35px;
            高さ: 35px;
            幅: 350ピクセル;
            境界線: 1px #ebebeb solid;
            テキストインデント: 5px;
        }
        .ログイン入力{
            オーバーフロー: 非表示;
            マージン: 0px 0px 20px 0px;
        }
        .ログイン入力ラベル{
            フロート: 左;
            幅: 90ピクセル;
            右パディング: 10px;
            高さ: 35px;
            行の高さ: 35px;
            テキスト配置: 右;
            フォントサイズ: 14px;
        }
        .ログインマスク{
            表示: なし;
            幅: 100%;
            高さ: 100%;
            位置: 固定;
            上: 0px;
            左: 0px;
            背景色: rgba(0, 0, 0, .3);
        }
    </スタイル>
</head>
<本文>
    <div class="login-header">クリックするとログインボックスが表示されます</div>
    <div id="ログイン" class="ログイン">
        <div id="title" class="login-title">メンバーログイン<span><a id="closeBtn" class="close-login" href="javascript:void(0);" >閉じる</a></span></div>
        <div class="ログイン入力コンテンツ">
            <div class="ログイン入力">
                <label>ユーザー名:</label>
                <input type="text" placeholder="ユーザー名を入力してください" id="username" class="list-input">
            </div>
            <div class="ログイン入力">
                <label>ログインパスワード:</label>
                <input type="password" placeholder="ログインパスワードを入力してください" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a id="login-button-submit" href="javascript:void(0);" >メンバーログイン</a></div>
    </div>
    <!-- マスクレイヤー-->
<div id="mask" class="ログインマスク"></div>

<スクリプト>
        // 1. 要素を取得する var login = document.querySelector('.login');
        var マスク = document.querySelector('.login-mask');
        var loginHeader = document.querySelector('.login-header');
        var closeBtn = document.querySelector('.close-login');
        var loginTitle = document.querySelector('.login-title');
 
        // 2. ログインプロンプトをクリックしてログインとマスクを表示します。
        loginHeader.addEventListener('click', 関数() {
            login.style.display = 'ブロック';
            mask.style.display = 'ブロック';
        })
        // 3. 閉じるボタンをクリックしてログインとマスクを非表示にします。
        closeBtn.addEventListener('click', 関数() {
            login.style.display = 'なし';
            マスクスタイル表示 = 'なし';
        })
        // 4. ログインボックスをドラッグします // 4.1 マウスを押してボックス内のマウスの座標を取得します loginTitle.addEventListener('mousedown', function(e) {
            var x = e.pageX-login.offsetLeft;
            var y = e.pageY-login.offsetTop;
            // 4.2 マウスが動くと、ページ内のマウスの座標からボックス内のマウスの座標を減算して、ログイン ボックスの左と上の値を取得します。 document.addEventListener('mousemove', move)
            関数move(イベント) {
                login.style.left = event.pageX - x + 'px';
                login.style.top = event.pageY - y + 'px';
            }
            // 4.3 マウスが離されたら、移動イベントを削除します document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', 移動)
            })
        })
</スクリプト>