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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript で JS ポップアップ ウィンドウを実装する 3 つの方法の詳細な説明
  • ポップアップウィンドウの数字推測ゲームを実装する js
  • ポップアップメッセージアニメーションを実現するネイティブjs
  • OpenLayers を Vue と統合して geojson をロードし、ポップアップ ウィンドウを実装する方法のチュートリアル
  • ポップアップ効果を実現するjs
  • JS+HTML に基づいて送信を確認するかどうかを促すポップアップウィンドウを実装する
  • モバイルポップアップウィンドウ後のスクロールを防止するJavaScript
  • 複数のJavaScriptポップアップイベントの使用

<<:  dockercompose を使用して springboot-mysql-nginx アプリケーションをビルドする

>>:  MySQL が外部キーを作成できない理由と解決策

推薦する

ウェブページデザインのための4つの実践的なヒント

関連記事: Web コンテンツ ページを作成するための 9 つの実用的なヒント<br />...

Vue が配列の変更を監視できない問題の解決方法

目次1. Vueリスナー配列2. vueが配列の変更を監視できない状況1. Vueリスナー配列Vue...

Amoeba を使用して MySQL データベースの読み取り/書き込み分離を実装する方法の詳細な説明

MySQL には読み取りと書き込みを分離するアーキテクチャが多数あります。Baidu のそれらのほと...

mysql 5.7.18 winx64 無料インストール設定方法

1. ダウンロード2. 減圧3. パス環境変数を追加し、mysqlが配置されているbinディレクトリ...

nginx を使用したプロキシ サーバーの設定

Nginx は、リバース プロキシ機能を使用して負荷分散を実装できるほか、フォワード プロキシ機能を...

ZooKeeper をベースにした Hadoop 高可用性クラスタの構築のチュートリアル図

目次1. 高可用性の概要1.1 可用性の高い全体アーキテクチャ1.2 QJMに基づく共有ストレージシ...

MySQLコマンドプロンプトで入力エラーが発生したときに前のコマンドを修正する方法

目次現在の問題解決プロセス具体的な手順解決した事件現在の問題MySQL コマンド プロンプトに複数行...

MySQL ファジークエリステートメントコレクション

SQL ファジークエリステートメント一般的なファジーステートメントの構文は次のとおりです。 SELE...

Reactでwindow.print()を使用した際にページが応答しなくなる問題の解決記録について

目次1. 問題の背景: 2. 問題の原因: 3. 問題解決:要約: 1. 問題の背景: window...

CSS スタイルを HTML 外部スタイルシートにインポートする方法

リンクインスタイルとは、すべてのスタイルを 1 つ以上の外部スタイルシート ファイルに配置することで...

CentOS 8 / RHEL 8 に VirtualBox 6.0 をインストールするための詳細なチュートリアル

VirtualBox は、技術者が異なる種類の複数の仮想マシン (VM) を同時に実行できるようにす...

nginx サーバーでの 502 不正なゲートウェイ エラーの原因のトラブルシューティング

パブリックアカウントのファンデータを同期してバッチプッシュするときに、サーバーがエラー502を報告し...

MySQLカスタム変数の概念と特徴

MySQL カスタム値は、値を保存するための一時的なコンテナです。サーバーへの接続がアクティブである...

Vue の大容量ファイルアップロードとブレークポイント再開アップロードの実装

目次ファイルアップロードのための2つのソリューションファイルストリーム(フォームデータ)に基づくクラ...