JavaScript でモバイルモーダルボックスの効果を実現

この記事では、モバイルモーダルボックス効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

ページ効果:

リンクをクリックすると、ログインモーダルボックスがポップアップ表示されます。閉じるリンクをクリックすると、モーダルボックスが閉じます。モーダルボックスのタイトル領域でマウスを押して、モーダルボックスをドラッグします。マウスを放すと、モーダルボックスの動きが止まります。

実装のアイデア:

1. HTMLとCSSでページを構築し、モーダルボックスのコンテンツとスタイルを設定した後、モーダルボックスを非表示にします。display: none; ポップアップモーダルボックスをクリックした後にページの背景色が変わる場合は、マスクレイヤーを追加して、最初にマスクレイヤーを非表示にすることができます。

2. クリック後にモーダルボックスをポップアップする要素にクリックイベントを追加します - - -onclick

イベントハンドラーでモーダルボックスとマスクレイヤーの表示を設定します。例:

login.style.display = 'ブロック';
loginBg.style.display = 'ブロック';

3. モーダルボックス要素を閉じるためのクリックイベントを追加します - onclick

イベントハンドラーで設定します - - - モーダルボックスとマスクレイヤーを非表示にします - - - 例:

login.style.display = 'なし';
loginBg.style.display = 'なし';

4. モーダルボックスのタイトルにマウスダウンイベントを追加します - - -mousedown
モーダルボックス内のマウスの位置を取得する

5. マウスの押下イベントにマウスの移動イベントを追加します - - -mousemove

document.addEventListener('mousemove', 移動);

ページ内のマウスの位置を取得します。モーダルボックス内のマウスの位置値 = ページ内のモーダルボックスの位置値。計算された位置値をモーダルボックスの上部と左側に割り当てることで、マウスをドラッグする効果が得られ、マウスの動きに追従します。

6. マウスを放すと、モーダルボックスの動きが停止します。マウスプレスイベントにマウスリリースイベントを追加します - - -mouseup
マウス解放イベントハンドラー: ページはマウス移動イベントを削除します - - -document.removeEventListener('mousemove', move);

注意:イベントを追加および削除するには、マウス移動関数を分離して関数名を記述し、イベントを追加および削除するときに関数名を参照します。

コード例:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>モーダルボックスをドラッグ</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        
        {
            テキスト装飾: なし;
            色: #000;
        }
        
        .ログインヘッダー{
            マージン: 100px 自動;
            高さ: 30px;
            行の高さ: 30px;
            フォントサイズ: 24px;
            テキスト配置: 中央;
        }
        
        。ログイン {
            表示: なし;
            幅: 515ピクセル;
            高さ: 282px;
            位置: 固定;
            上位: 50%;
            左: 50%;
            変換: translate(-50%, -50%);
            境界線: 1px 実線 #ebebeb;
            背景色: #fff;
            ボックスシャドウ: 0px 0px 20px #ddd;
            テキスト配置: 中央;
            zインデックス: 99999;
        }
        
        .ログインタイトル{
            位置: 相対的;
            高さ: 50px;
            行の高さ: 50px;
            フォントサイズ: 18px;
            カーソル: 移動;
        }
        
        。近い {
            位置: 絶対;
            上: 0;
            右: 0;
            変換: translate(50%, -50%);
            幅: 36ピクセル;
            高さ: 36px;
            行の高さ: 36px;
            フォントサイズ: 12px;
            境界線の半径: 18px;
            境界線: 1px 実線 #ddd;
            色: #666;
            背景色: #fff;
        }
        
        .ログイン入力コンテンツ{
            マージン: 10px 0;
        }
        
        .ログイン入力ラベル{
            表示: インラインブロック;
            幅: 80ピクセル;
            テキスト配置: 右;
        }
        
        .ログイン入力入力{
            幅: 300ピクセル;
            高さ: 40px;
            マージン: 10px 0;
            左パディング: 10px;
            境界線: 1px 実線 #ddd;
            アウトライン色: ロイヤルブルー;
        }
        
        .loginBtn {
            表示: ブロック;
            幅: 180ピクセル;
            高さ: 35px;
            行の高さ: 35px;
            マージン: 10px 自動;
            境界線: 1px 実線 #ddd;
        }
        
        .ログイン-bg {
            表示: なし;
            位置: 固定;
            上: 0;
            左: 0;
            幅: 100%;
            高さ: 100%;
            背景色: rgba(0, 0, 0, .3);
        }
    </スタイル>
</head>

<本文>
    <div class="login-header"><a id="link" href="javascript:;" >クリックするとログイン ボックスが表示されます</a></div>
    <div class="ログイン">
        <div class="ログインタイトル">
            ログインメンバー<span><a class="close" href="javascript:void(0);" >閉じる</a></span>
        </div>
        <div class="ログイン入力コンテンツ">
            <div class="ログイン入力">
                <label for="username">ユーザー名:</label>
                <input type="text" name="info[username]" id="username" placeholder="ユーザー名を入力してください"><br>
            </div>
            <div class="ログイン入力">
                <label for="password">ログインパスワード:</label>
                <input type="password" name="info[password]" id="password" placeholder="ログインパスワードを入力してください"><br>
            </div>
        </div>
        <div type="submit" value="ログインメンバー" class="loginBtn"><a href="javascript:void(0);" >ログインメンバー</a></div>
    </div>

    <!-- カバー層 -->
    <div class="login-bg"></div>
    <スクリプト>
        var link = document.querySelector('#link');
        var login = document.querySelector('.login');
        var loginBg = document.querySelector('.login-bg');
        var close = document.querySelector('.close');
        var loginTitle = document.querySelector('.login-title');
        link.addEventListener('クリック', 関数() {
            login.style.display = 'ブロック';
            loginBg.style.display = 'ブロック';
        })

        close.addEventListener('click', 関数() {
            login.style.display = 'なし';
            loginBg.style.display = 'なし';
        })

        loginTitle.addEventListener('mousedown', 関数(e) {
            // マウスが押されたときにモーダル ボックス内のマウスの位置を計算します var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;

            // 移動するモーダルボックスに位置を割り当てる function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }

            // マウス イベントを追加します。マウスが押されると、モーダル ボックスはマウスとともに移動します。 document.addEventListener('mousemove', move);

            // マウスを離すと、モーダルボックスの動きが止まります document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', 移動);
            })

        })
    </スクリプト>
</本文>

</html>

ページ効果: