jsはポップアップウィンドウをクリックすることでポップアップログインボックスを実装します

この記事では、ポップアップウィンドウをクリックしたときにポップアップログインボックスを実現するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1 画像プレビュー

2 index.html コード

<!DOCTYPE html>
<html lang="ja">
 <ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>js ポップアップ ウィンドウをクリックしてログイン ボックス コードをポップアップ表示します</title>
 </head>
 <本文>
  <スタイル>
   *{ 
    マージン:0;
    パディング:0;
   }
         ボタン、入力{
    アウトライン:なし;
   }
   ボタン、.login{
    幅:120ピクセル; 
    高さ:42px; 
    背景:#f40; 
    色:#fff; 
    境界線:なし; 
    境界線の半径:6px;
    表示: ブロック;
    マージン:20px 自動; 
    カーソル: ポインタ;
   }
   .popOutBg{
    幅:100%;
    高さ:100%;
    位置: 固定;
    左:0;
    トップ:0;
    背景:rgba(0,0,0,.6);
    表示: なし;
   }
   .ポップアウト{
    位置:固定;
    幅:600ピクセル; 
    高さ:300px;
    上位:50%;
    残り:50%;
    上マージン:-150px;
    左マージン:-300px;
    背景:#fff;
    境界線の半径:8px;
    オーバーフロー: 非表示;
    表示: なし;
   }
   .popOut > span{
    位置: 絶対;
    右:10px;
    トップ:0; 
    高さ:42px;
    行の高さ:42px;
    色:#000;
    フォントサイズ:30px;
    カーソル: ポインタ;
   }
   .popOut テーブル{
    表示: ブロック;
    マージン:42px 自動 0;
    幅:520ピクセル;
   }
   .popOut キャプション{
    幅:520ピクセル;
    テキスト配置: 中央;
    色:#f40;
    フォントサイズ:18px;
    行の高さ:42px;
   }
   .popOut テーブル tr td{
    色:#666;
    パディング:6px;
    フォントサイズ:14px;
   }
   .popOut テーブル tr td:first-child{
    テキスト配置: 右;
   }
   .inp{
    幅:280ピクセル;
    高さ:30px;
    行の高さ:30px;
    境界線:1px 実線 #999;
    パディング:5px 10px;
    色:#000;
    フォントサイズ:14px;
    境界線の半径:6px;
   }
   .inp:フォーカス{ 
    境界線の色:#f40;
   }
   @keyframes アニ{
    から{
     変換: translateX(-100%) 回転(-60度) スケール(.5);
    }
    50%{
     変換: translateX(0) rotate(0) scale(1);
    }
    90%
     変換: translateX(20px) rotate(0) scale(.8);
    }
    に{
     変換: translateX(0) rotate(0) scale(1);
    }
   }
   .ani{ アニメーション:ani .5s イーズインアウト;}
  </スタイル>
  <button type="button">ログイン</button>
  <div class="popOutBg"></div>
  <div class="popOut">
   <span title="閉じる"> × </span>
   <テーブル>
    <caption>このウェブサイトへようこそ</caption>
    <tr>
     <td width="120">ユーザー名:</td>
     <td><input type="text" class="inp" placeholder="ユーザー名を入力してください" /></td>
    </tr>
    <tr>
     <td>パスワード:</td>
     <td><input type="password" class="inp" placeholder="パスワードを入力してください" /></td>
    </tr>
    <tr>
     <td colspan="2"><input type="button" class="login" value="ログイン" /></td>
    </tr>
   </テーブル>
  </div>
  <script type="text/javascript">
   関数 $(パラメータ) {
    （引数[1] == true）の場合{
     document.querySelectorAll(param) を返します。
    } それ以外 {
     document.querySelector(param) を返します。
    }
   }
   関数ani() {
    $(".popOut").className = "popOutアニメーション";
   }
   $("ボタン").onclick = 関数() {
    $(".popOut").style.display = "ブロック";
    アニ();
    $(".popOutBg").style.display = "ブロック";
   };
   $(".popOut > span").onclick = 関数() {
    $(".popOut").style.display = "なし";
    $(".popOutBg").style.display = "なし";
   };
   $(".popOutBg").onclick = 関数() {
    $(".popOut").style.display = "なし";
    $(".popOutBg").style.display = "なし";
   };
  </スクリプト>
 </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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