この記事では、ポップアップウィンドウをクリックしたときにポップアップログインボックスを実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: dockercompose を使用して springboot-mysql-nginx アプリケーションをビルドする
関連記事: Web コンテンツ ページを作成するための 9 つの実用的なヒント<br />...
目次1. Vueリスナー配列2. vueが配列の変更を監視できない状況1. Vueリスナー配列Vue...
MySQL には読み取りと書き込みを分離するアーキテクチャが多数あります。Baidu のそれらのほと...
1. ダウンロード2. 減圧3. パス環境変数を追加し、mysqlが配置されているbinディレクトリ...
Nginx は、リバース プロキシ機能を使用して負荷分散を実装できるほか、フォワード プロキシ機能を...
目次1. 高可用性の概要1.1 可用性の高い全体アーキテクチャ1.2 QJMに基づく共有ストレージシ...
目次現在の問題解決プロセス具体的な手順解決した事件現在の問題MySQL コマンド プロンプトに複数行...
SQL ファジークエリステートメント一般的なファジーステートメントの構文は次のとおりです。 SELE...
目次1. 問題の背景: 2. 問題の原因: 3. 問題解決:要約: 1. 問題の背景: window...
リンクインスタイルとは、すべてのスタイルを 1 つ以上の外部スタイルシート ファイルに配置することで...
VirtualBox は、技術者が異なる種類の複数の仮想マシン (VM) を同時に実行できるようにす...
パブリックアカウントのファンデータを同期してバッチプッシュするときに、サーバーがエラー502を報告し...
MySQL カスタム値は、値を保存するための一時的なコンテナです。サーバーへの接続がアクティブである...
console.log( [] == ![] ) // 真 console.log( {} == ...
目次ファイルアップロードのための2つのソリューションファイルストリーム(フォームデータ)に基づくクラ...