jQueryはシンプルなポップアップウィンドウ効果を実装します

jQueryはシンプルなポップアップウィンドウ効果を実装します

この記事では、簡単なポップアップウィンドウ効果を実現するための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に注意してください
jQueryの任意のバージョンをダウンロードして、

<!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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQuery で実装された 2 つのシンプルなポップアップ ウィンドウ効果の例
  • jQuery はポップアップ ウィンドウ (システム プロンプト ボックス) 効果を実装します
  • カスタムポップアップを実現するためのJQueryの例
  • jQuery UI ダイアログでポップアップ特殊効果を実装するためのアイデアとコード
  • 小型で強力な jQuery レイヤー ポップアップ ウィンドウ プラグイン
  • jQueryポップアップ効果のシンプルな実装
  • jQueryはalert()と同様のポップアップウィンドウの中央揃え効果を実装します。
  • jQueryはポップアップウィンドウ機能を実装します(ウィンドウは中央に表示されます)
  • jQuery はポップアップ ウィンドウのプロンプト ウィンドウのコード共有を実現します
  • JQuery のトグルを使用して、Web ページの読み込みが完了した後に自動ポップアップ ウィンドウを実現します。

<<:  Dockerネットワーク作成に--subnetを追加した後の問題を解決する

>>:  XHTML Web ページ チュートリアル

推薦する

HTML テーブルタグチュートリアル (33): セルの垂直配置属性 VALIGN

垂直方向では、セルの配置を上、中央、下に設定できます。基本的な構文<TD VLIGN=&quo...

MySQL マスタースレーブ構築(複数のマスターと 1 つのスレーブ)の実装アイデアと手順

背景:最近、同社のプロジェクトは同時実行のプレッシャーに耐えられないようなので、最適化が差し迫ってい...

React Nativeの起動プロセスの詳細分析

はじめに: この記事ではreact-native-cliで作成したサンプル プロジェクト (Andr...

Vue で eslint 検出をオフにする方法 (複数の方法)

目次1. 問題の説明2. 問題解決1. 問題の説明Vue プロジェクトを開発する場合、作成時に誤って...

Linux でユーザーにルート権限を追加する方法の概要

1. ユーザーを追加します。まず、adduser コマンドを使用して共通ユーザーを追加します。コマン...

Webデザインの経験:ナビゲーションシステムをシンプルにする

<br />友人と話し合っていたとき、フレームワークのレイヤー設計の中で最も核となるのは...

React+Koa によるファイルアップロードの実装例

目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...

Vueはページに透かし効果を追加する機能を実装します

最近、あるプロジェクトに取り組んでいたとき、ページに透かし効果を追加するように依頼されました。さっそ...

Linux で iostat コマンドを使用するチュートリアル

序文運用・保守を行う人がスキルを持っていなければ、サーバーを操作するのに恥ずかしさを感じてしまうと言...

MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離

目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...

2048 ゲームを実装するためのネイティブ js

2048ミニゲーム、参考までに具体的な内容は以下のとおりですまず、2048ゲームは16のグリッドか...

完璧なアロエベラジェルを選ぶには?完璧なアロエベラジェルの本物と偽物の見分け方

最新のパーフェクト アロエ ベラ ジェルのパッケージ ボックスには、赤いフォントで完璧な英語の文字が...

MySQL ファントムリードとその排除方法の詳細な説明

目次トランザクション分離レベルファントムリーディングとは何ですか?ファントムリードを排除する方法要約...

Linux で MySQL スケジュール タスク バックアップ データを実装する方法

序文バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...

ウェブページ内でウェブテーブルやdivレイヤーが引き伸ばされる問題の解決策

<br />Web ページをデザインするときには、いつも不快なことに遭遇します。最も一般...