この記事では、簡単なポップアップウィンドウ効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 効果実現図 CSSコード h1、p、h2{ マージン: 0; パディング: 0; } .modal_info{ ディスプレイ: フレックス; 可視性: 非表示; flex-direction: 列; align-items:flex-start; コンテンツの配置: flex-start; 幅: 200ピクセル; 高さ: 自動; 位置: 固定; マージン:自動; 背景色: #FFFFFF; 境界線の半径: 3px; 上位: 45% 左: 50%; ボックスのサイズ: 境界線ボックス; zインデックス: 111; -webkit-transform: スケール(0.7); -moz-transform: スケール(0.7); -ms-transform: スケール(0.7); 変換: スケール(0.7); 不透明度: 0; -webkit-transition: すべて 0.3 秒; -moz-transition: すべて 0.3 秒; 遷移: すべて 0.3 秒; } .modal_info .head_blue{ パディング: 5px 10px; 高さ: 自動; ボックスのサイズ: 境界線ボックス; 背景: #2262C6; フォントスタイル: 通常; フォントの太さ: 太字; フォントサイズ: 18px; 行の高さ: 18px; 色: #FFFFFF; 幅: 100%; ディスプレイ: フレックス; flex-direction: 行; アイテムの位置を中央揃えにします。 コンテンツの配置: スペースの間に !important; テキスト変換:大文字化; } .modal_info .head_blue h1{ フォントサイズ: 18px; 色: 白; } .modal_info .body_main{ ディスプレイ: フレックス; flex-direction: 列; アイテムの位置を中央揃えにします。 コンテンツの配置: flex-start; パディング: 10px 10px; 背景色: #FFFFFF; フレックス: 1; 幅: 100%; ボックスのサイズ: 境界線ボックス; } .modal_info .bottom_button{ ディスプレイ: フレックス; flex-direction: 行; アイテムの位置を中央揃えにします。 コンテンツの両端揃え: スペースを空ける; 幅: 100%; パディング: 10px; ボックスのサイズ: 境界線ボックス; } .modal_info .bottom_button div{ ディスプレイ: フレックス; flex-direction: 行; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; パディング: 5px; ボックスのサイズ: 境界線ボックス; } .modal_info .bottom_button .yes{ 背景色: #2262C6; 色: #FFFFFF; } .modal_info .bottom_button .no{ 背景色: #FFFFFF; 色: #505050; 境界線: 1px 実線 #505050; } .md-表示{ 可視性:表示可能!重要; -webkit-transform: スケール(1); -moz-transform: スケール(1); -ms-transform:スケール(1); 変換: スケール(1); 不透明度: 1; } HTMLコードとjQueryコード、参照されているCSSとJSに注意してください <!DOCTYPE html> <html> <ヘッド> <title>ポップアップ</title> <link rel="スタイルシート" href="./modal.css" /> </head> <body style="background-color: black;"> <div class="button_click" style="background-color:#FFFFFF;width: 100px;height: 100px;">ここをクリック</div> </本文> <script type="text/javascript" src="jquery-3.5.1.min.js"></script> <スクリプト> 関数 modal_confirm(オプション){ var {title,question,content,confirm,cancel,style,btn} = オプション; var yes_confirm、no_cancel; btn.forEach(item=>{ if(item.yes){ yes_confirm = アイテム.yes; } そうでない場合は(item.cancel){ no_cancel = アイテムをキャンセルします。 } } ) '.modal_info' の場合 'modal_info' を削除します。 } $('body').append(`<div class="modal_info" style="${style?style:''}"></div>`); var モーダル = $('.modal_info'); modal.append(`<div class="head_blue"><h1>${title?title:'title'}</h1></div>`); modal.append(`<div class="body_main"><h1>${question?question:'question'}</h1><p>${content?content:'content'}</p></div>`); modal.append(`<div class="bottom_button"><div class="yes">${confirm?confirm:'confirm'}</div><div class="no">${cancel?cancel:'cancel'}</div></div>`); タイムアウトを設定する(() => { $('.modal_info').addClass('md-show'); }, 10); $('.yes,.no').on('click',function(){ if($(this).attr('class')==='yes') { はい、確認します。 } それ以外{ キャンセルしません。 } $('.modal_info').removeClass('md-show'); タイムアウトを設定します(()=>{ 親ノードを削除します。 },300); }) } $('.button_click').on('click',function(){ モーダル確認({ title:'タイトル', 質問:''、 コンテンツ:'コンテンツ', 確認する:''、 キャンセル:'キャンセル', スタイル: '幅:200px;高さ:200px', ボタン:[{ はい:関数(){ console.log('これは確認です'); } }, { キャンセル:関数(){ console.log('これはキャンセルです'); } } ] }); }) </スクリプト> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Dockerネットワーク作成に--subnetを追加した後の問題を解決する
垂直方向では、セルの配置を上、中央、下に設定できます。基本的な構文<TD VLIGN=&quo...
背景:最近、同社のプロジェクトは同時実行のプレッシャーに耐えられないようなので、最適化が差し迫ってい...
はじめに: この記事ではreact-native-cliで作成したサンプル プロジェクト (Andr...
目次1. 問題の説明2. 問題解決1. 問題の説明Vue プロジェクトを開発する場合、作成時に誤って...
1. ユーザーを追加します。まず、adduser コマンドを使用して共通ユーザーを追加します。コマン...
<br />友人と話し合っていたとき、フレームワークのレイヤー設計の中で最も核となるのは...
目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...
最近、あるプロジェクトに取り組んでいたとき、ページに透かし効果を追加するように依頼されました。さっそ...
序文運用・保守を行う人がスキルを持っていなければ、サーバーを操作するのに恥ずかしさを感じてしまうと言...
目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...
2048ミニゲーム、参考までに具体的な内容は以下のとおりですまず、2048ゲームは16のグリッドか...
最新のパーフェクト アロエ ベラ ジェルのパッケージ ボックスには、赤いフォントで完璧な英語の文字が...
目次トランザクション分離レベルファントムリーディングとは何ですか?ファントムリードを排除する方法要約...
序文バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...
<br />Web ページをデザインするときには、いつも不快なことに遭遇します。最も一般...