2020/11/25jQueryを使用したシンプルなモーダルポップアップの実装方法についてコードの解説を含めて記します。ボタンをクリックすると画面がグレーアウトして縦横中央にポップアップ画像が表示され、背景をクリックすると消えるというものを作っていきます。Contents1表示領域と表示する中身をHTMLで書く2CSSで表示領域の背景と中身の位置を調整する3JQueryで表示と非表示のイベントフックをつくるソースコード全文1表示領域と表示する中身をHTMLで書く今回はボタンクリックでポップアップを出せるようにボタンも用意しておきます。</div>ボタンと画像が表示されました。画像は一旦少し小さめに表示しております。ボタンは押してもまだ何も起きません。z-index:9999!important;}</style>現段階で表示してしまうとすべてのコンテンツが隠れて戻せなくなってしまうので、ここは解説に留めます。3~7行目で枠を作り、11行目で背景に色をかけ(#1119はいい感じのグレーの透過になる)、12~14行目で背景の位置とサイズを調整し、18~22行目で中身の表示位置とサイズを調整しています。})</script>下のボタンをクリックするとポップアップが表示されるはずです。背景をクリックするとポップアップは消えます。ポップアップ表示1行目でjQueryのCDNを読み込み、3行目でロード時はポップアップを隠し、4~6行目でボタンクリック時にポップアップを表示し7~9行目で画面の背景をクリック時にポップアップを非表示にしています。最後に全コードを載せておきます。})</script>以上、jQueryでシンプルなポップアップを実装する方法でした。Posts関連記事は見つかりませんでした。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。views2021/1/202023/5/13タイトルとURLをコピーしました。