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 が外部キーを作成できない理由と解決策

推薦する

MySQL での replace と replace into の使い方の説明

MySQL の replace と replace into はどちらも頻繁に使用される関数です。r...

Vueでaxiosをカプセル化する方法

目次1. インストール1. はじめに3. インターフェースルートアドレス4. 使用例4.1 ダウンロ...

見落とされがちなMETAタグの特殊効果(ページ遷移効果)

Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...

JavaScript 関数のコンテキストのルールは何ですか?

目次1. ルール 1: Object.Method() 1.1 ケース1 1.2 ケース2 1.3 ...

Centos で MySQL パスワードを変更する方法

1. MySQL ログイン設定を変更します。 # vim /etc/my.cnf文を追加: skip...

Nginxドメイン名転送のhttpsアクセスの実装

事前に一言:突然、複数のドメイン名のアクセスを https に転送するというタスクを受け取りました。...

Navicatをサーバー上のdockerデータベースに接続する方法

dokekrでmysqlコンテナを起動するコマンドを使用します: docker run -p 330...

Windows 7 で MySQL 8.0.16 をインストールして使用する場合、パスワードの変更と Navicat への接続に関する問題が発生する

MySQL のインストール時にいくつかの問題が発生しました。オンラインで見つけた回答は似たようなもの...

Vueは商品詳細ページの虫眼鏡機能を実装します

この記事では、商品詳細ページの虫眼鏡を実装するためのVueの具体的なコードを参考までに共有します。具...

Vuex ステートマシンの簡単な理解とサンプルアプリケーション

目次1. 概念の素早い理解: 1. コンポーネント間でデータを共有する方法: 2. vuex とは何...

Vueでファジークエリを実装する方法の簡単な例

序文いわゆるファジークエリとは、ユーザーの完全な入力やすべての入力情報がなくてもクエリサービスを提供...

MySqlのインストールとアンインストールに関する詳細なチュートリアル

この記事では、MySqlのインストールとアンインストールのチュートリアルを参考までに紹介します。具体...

JS Canvas インターフェースとアニメーション効果

目次概要Canvas API: グラフィックスの描画パス線種矩形アーク文章グラデーションと画像の塗り...

VMware15 の Deepin インストール詳細チュートリアル (画像とテキスト)

序文Deepin のユーザー インターフェイスは、使用時に非常に見栄えがします。インターフェイス効果...

3分でUbuntu 16.04を初期化し、Java、Maven、Docker環境をデプロイする

Fast-Linux プロジェクト アドレス: https://gitee.com/uitc/Fas...