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

テキスト・表示ボタン・サイズ・余白・角丸・背景色・文字色・影などを設定して、HTML・CSS・JavaScriptを自動生成できます。

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

基本

HTML/CSSだけでポップオーバーを作る方法
基本のポップオーバーを作る方法

開閉

閉じるボタンで閉じられるポップオーバーの作り方
×ボタンで閉じられるポップオーバーの作り方
ESCキーで閉じられるポップオーバーの作り方
外側クリックで閉じられるポップオーバーの作り方

表示非表示

フォーカスで表示するポップオーバーを作る方法
ホバーで表示するポップオーバーを作る方法

アニメーション

フェードイン・フェードアウトで表示するポップオーバーの作り方

デザイン

背景をぼかして表示するポップオーバーの作り方
背景を暗く表示するポップオーバーの作り方
立体的なポップオーバーを作る方法

レイアウト

ボタンの右に表示するポップオーバーを作る方法
ボタンの左に表示するポップオーバーを作る方法
ボタンの下に表示するポップオーバーを作る方法
ボタンの上に表示するポップオーバーを作る方法

初期状態

最初から表示されたポップオーバーを作る方法

自動

指定時間後に自動で閉じるポップオーバーの作り方

コンテンツ

画像付きポップオーバーを表示する方法