この記事では、ポップアップウィンドウをクリックしたときにポップアップログインボックスを実現するための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 アプリケーションをビルドする
MySQL の replace と replace into はどちらも頻繁に使用される関数です。r...
目次1. インストール1. はじめに3. インターフェースルートアドレス4. 使用例4.1 ダウンロ...
Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...
目次1. ルール 1: Object.Method() 1.1 ケース1 1.2 ケース2 1.3 ...
1. MySQL ログイン設定を変更します。 # vim /etc/my.cnf文を追加: skip...
事前に一言:突然、複数のドメイン名のアクセスを https に転送するというタスクを受け取りました。...
dokekrでmysqlコンテナを起動するコマンドを使用します: docker run -p 330...
MySQL のインストール時にいくつかの問題が発生しました。オンラインで見つけた回答は似たようなもの...
この記事では、商品詳細ページの虫眼鏡を実装するためのVueの具体的なコードを参考までに共有します。具...
目次1. 概念の素早い理解: 1. コンポーネント間でデータを共有する方法: 2. vuex とは何...
序文いわゆるファジークエリとは、ユーザーの完全な入力やすべての入力情報がなくてもクエリサービスを提供...
この記事では、MySqlのインストールとアンインストールのチュートリアルを参考までに紹介します。具体...
目次概要Canvas API: グラフィックスの描画パス線種矩形アーク文章グラデーションと画像の塗り...
序文Deepin のユーザー インターフェイスは、使用時に非常に見栄えがします。インターフェイス効果...
Fast-Linux プロジェクト アドレス: https://gitee.com/uitc/Fas...