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

以下もご興味があるかもしれません: