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 フォーム コンポーネントのサンプル コード

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。次のコードは、HTM...

Docker はキューとタスクのスケジューリングを実現するために Laravel アプリケーションをデプロイします

前回の記事では、Docker を使用して Laravel アプリケーションをデプロイする方法について...

Linux のインスタンスにパブリック IP アドレスを割り当てる方法

説明するこのインターフェースを呼び出すときは、次の点に注意する必要があります。パブリック IP アド...

Vueモバイル端末が指のスライド効果を実現

この記事の例では、Vueモバイル端末で指のスライド効果を実現するための具体的なコードを紹介します。具...

Linux における「/」と「~」の違いの詳細な説明

「/」はルートディレクトリ、「~」はホームディレクトリです。 Linux ストレージはツリー状にマウ...

mysql 5.7.11 winx64 初期パスワード変更

公式サイトからMySQL-5.7.11-winx64の圧縮版をダウンロード。インストール後、パスワー...

JavaScript キャンバスでカラフルな太陽のハロー効果を実現

この記事では、カラフルな太陽のハロー効果を実現するためのJavaScriptキャンバスの具体的なコー...

プロフェッショナルなMySQL開発設計仕様とSQL記述仕様

チーム開発のプロセスでは、プロジェクトの安定性、コードの効率性、管理の利便性のために、内部開発および...

Centos8 で yum を使用して mongodb 4.2 をインストールする方法

1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...

MySQL公式パフォーマンステストツールmysqlslapの使い方の紹介

目次導入説明書実際の経験まとめ導入MySQL は最も人気のあるオープンソース データベースとして、さ...

モバイル端末の適応により、px は自動的に rem に変換されます。

まずpostcss-pxtoremをインストールします: npm install postcss-p...

ローカル写真をアップロードする前にプレビューコード例を実装するための HTML5 と jQuery

HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は...

Vueは移動可能なフローティングボタンを実装します

この記事の例では、どこにでも移動できるフローティングボタンを実現するためのVueの具体的なコードを共...

Windows 10 で MySQL を完全に削除してアンインストールする方法

序文この記事では、Windows 10 システムで MySQL を完全に削除してアンインストールする...

タオバオモールのホームページ上の大きな画像のデザイン構造に関する分析と意見(写真)

前回、Taobaoの詳細ページを分析した後(クリックして表示)、ショッピングモールの基本テンプレート...