この記事では、簡単なポップアップウィンドウ効果を実現するための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を追加した後の問題を解決する
HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。次のコードは、HTM...
前回の記事では、Docker を使用して Laravel アプリケーションをデプロイする方法について...
説明するこのインターフェースを呼び出すときは、次の点に注意する必要があります。パブリック IP アド...
この記事の例では、Vueモバイル端末で指のスライド効果を実現するための具体的なコードを紹介します。具...
「/」はルートディレクトリ、「~」はホームディレクトリです。 Linux ストレージはツリー状にマウ...
公式サイトからMySQL-5.7.11-winx64の圧縮版をダウンロード。インストール後、パスワー...
この記事では、カラフルな太陽のハロー効果を実現するためのJavaScriptキャンバスの具体的なコー...
チーム開発のプロセスでは、プロジェクトの安定性、コードの効率性、管理の利便性のために、内部開発および...
1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...
目次導入説明書実際の経験まとめ導入MySQL は最も人気のあるオープンソース データベースとして、さ...
まずpostcss-pxtoremをインストールします: npm install postcss-p...
HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は...
この記事の例では、どこにでも移動できるフローティングボタンを実現するためのVueの具体的なコードを共...
序文この記事では、Windows 10 システムで MySQL を完全に削除してアンインストールする...
前回、Taobaoの詳細ページを分析した後(クリックして表示)、ショッピングモールの基本テンプレート...