JavaScript はモーダルボックスのドラッグ効果を実現します

これはモーダルボックスのドラッグのケースです。ここで実装する関数は次のとおりです。

1. ポップアップレイヤーをクリックすると、モーダルボックスがポップアップ表示され、灰色の半透明のマスキングレイヤーが表示されます。

2. 閉じるボタンをクリックして、モーダルボックスと灰色の半透明マスクレイヤーを同時に閉じます。

3. マウスをモーダルボックスの一番上の行に置き、マウスを押したままモーダルボックスをドラッグしてページ上を移動します。

4. マウスを放してモーダルボックスのドラッグを停止します。

実装のアイデアは次のとおりです。

ポップアップレイヤーをクリックすると、モーダルボックスとブロッキングレイヤーが表示されます。display:block;

閉じるボタンをクリックすると、モーダルボックスとカバーレイヤーが非表示になります (display:none;)。

ページ上でドラッグする原理: マウスを押して移動し、マウスを放します。

トリガーイベントは、マウスが押されたときの mousedown、マウスが移動されたときの mousemove、マウスが放されたときの mouseup です。

ドラッグ処理: マウスが移動すると、最新の値を取得してモーダルボックスの左と上の値に割り当て、モーダルボックスがマウスに追従できるようにします。

マウスクリックによってトリガーされるイベントソースは、一番上の行、つまり <div id="title" class="login-title">Login Member です。

マウスの座標からボックス内のマウスの座標を引いた値が、モーダルボックスの実際の位置になります。

マウスが押された状態で、ボックス内のマウスの座標を取得します。

マウスを移動し、モーダルボックスの座標を、マウス座標からボックス座標を引いた値に設定します。移動イベントがプレスイベントに書き込まれることに注意してください。

マウスを放すとドラッグが停止し、マウス移動イベントが解放されます。

実装コードは次のとおりです。

<!DOCTYPE html>
<html>

<head lang="ja">
    <メタ文字セット="UTF-8">
    <タイトル></タイトル>
    <スタイル>
        .ログインヘッダー{
            幅: 100%;
            テキスト配置: 中央;
            高さ: 30px;
            フォントサイズ: 24px;
            行の高さ: 30px;
        }
        
        ウル、
        李、
        オール、
        dl、
        dt、
        dd、
        div、
        p、
        スパン、
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        {
            パディング: 0px;
            マージン: 0px;
        }
        
        。ログイン {
            表示: なし;
            幅: 512ピクセル;
            高さ: 280px;
            位置: 固定;
            境界線: #ebebeb 実線 1px;
            左: 50%;
            上位: 50%;
            背景: #ffffff;
            ボックスシャドウ: 0px 0px 20px #ddd;
            zインデックス: 9999;
            変換: translate(-50%, -50%);
        }
        
        .ログインタイトル{
            幅: 100%;
            マージン: 10px 0px 0px 0px;
            テキスト配置: 中央;
            行の高さ: 40px;
            高さ: 40px;
            フォントサイズ: 18px;
            位置: 相対的;
            カーソル: 移動;
        }
        
        .ログイン入力コンテンツ{
            上マージン: 20px;
        }
        
        .ログインボタン{
            幅: 50%;
            マージン: 30px 自動 0px 自動;
            行の高さ: 40px;
            フォントサイズ: 14px;
            境界線: #ebebeb 1px 実線;
            テキスト配置: 中央;
        }
        
        .ログイン-bg {
            表示: なし;
            幅: 100%;
            高さ: 100%;
            位置: 固定;
            上: 0px;
            左: 0px;
            背景: rgba(0, 0, 0, .3);
        }
        
        {
            テキスト装飾: なし;
            色: #000000;
        }
        
        .ログインボタン a {
            表示: ブロック;
        }
        
        .ログイン入力 入力.リスト入力 {
            フロート: 左;
            行の高さ: 35px;
            高さ: 35px;
            幅: 350ピクセル;
            境界線: #ebebeb 1px 実線;
            テキストインデント: 5px;
        }
        
        .ログイン入力{
            オーバーフロー: 非表示;
            マージン: 0px 0px 20px 0px;
        }
        
        .ログイン入力ラベル{
            フロート: 左;
            幅: 90ピクセル;
            右パディング: 10px;
            テキスト配置: 右;
            行の高さ: 35px;
            高さ: 35px;
            フォントサイズ: 14px;
        }
        
        .ログインタイトルスパン{
            位置: 絶対;
            フォントサイズ: 12px;
            右: -20px;
            上: -30px;
            背景: #ffffff;
            境界線: #ebebeb 実線 1px;
            幅: 40px;
            高さ: 40px;
            境界線の半径: 20px;
        }
    </スタイル>
</head>

<本文>
    <div class="login-header"><a id="link" href="javascript:;" rel="external nofollow" >クリックするとログイン ボックスが表示されます</a></div>
    <div id="ログイン" class="ログイン">
        <div id="title" class="login-title">メンバーログイン<span><a id="closeBtn" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="close-login">閉じる</a></span>
        </div>
        <div class="ログイン入力コンテンツ">
            <div class="ログイン入力">
                <label>ユーザー名:</label>
                <input type="text" placeholder="ユーザー名を入力してください" name="info[ユーザー名]" id="ユーザー名" class="list-input">
            </div>
            <div class="ログイン入力">
                <label>ログインパスワード:</label>
                <input type="password" placeholder="ログインパスワードを入力してください" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="login-button-submit">メンバーログイン</a></div>
    </div>
    <!-- カバー層 -->
    <div id="bg" class="login-bg"></div>
    <スクリプト>
        // 1. 要素を取得する var login = document.querySelector('.login');
        var マスク = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('#title');
        // 2. ポップアップリンクリンクをクリックしてマスクとログインを表示します。link.addEventListener('click', function() {
                mask.style.display = 'ブロック';
                login.style.display = 'ブロック';
            })
            // 3. closeBtn をクリックしてマスクを非表示にしてログインします 
        closeBtn.addEventListener('click', 関数() {
                マスクスタイル表示 = 'なし';
                login.style.display = 'なし';
            })
            // 4. ドラッグを開始する // (1) マウスを押してボックス内のマウスの座標を取得する title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) マウスが移動すると、ページ上のマウスの座標からボックス内のマウスの座標を引いた値がモーダルボックスの左と上の値になります document.addEventListener('mousemove', move)

            関数move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) マウスがポップアップしたら、マウス移動イベントを削除します document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', 移動);
            })
        })
    </スクリプト>
</本文>

</html>

効果は次のとおりです。

JavaScript を使用してモーダルドラッグ効果を実装する方法についての記事はこれで終わりです。JavaScript モーダルドラッグの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: