ポップアップ
コピペですぐ使えるポップアップのサンプルコードを動作・特徴別にまとめています。
無料ツール
ポップアップを自由に作成

見出し・説明・サイズ・余白・角丸・背景色・枠線・影などを設定して、HTML・CSSを自動生成できます。

ポップアップ作成ツールを使う
新しいタブで開きます

基本

基本のポップアップを作る方法

表示非表示

閉じるボタンで閉じられるポップアップの方法
ESCキーで閉じるポップアップを作る方法
外側クリックで閉じるポップアップを作る方法
×ボタンで閉じるポップアップを作る方法

アニメーション

スライドイン・スライドアウトするポップアップを作る方法
フェードイン・フェードアウトするポップアップを作る方法

デザイン

背景をぼかして表示するポップアップの作り方
背景を暗く表示するポップアップの作り方

レイアウト

画面上部に表示するポップアップを作る方法

自動

指定時間後に自動で閉じるポップアップを作る方法
指定時間後にポップアップを表示する方法

コンテンツ

画像付きポップアップを表示する方法