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

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

モーダルウインドウ作成ツールを使う
新しいタブで開きます

基本

基本のモーダルウインドウを作る方法
HTML/CSSだけで動くモーダルウインドウの作り方

開閉

外側クリックで閉じられるモーダルウインドウの作り方
ESCキーで閉じられるモーダルウインドウの作り方

表示非表示

HTML/CSSだけで複数モーダルウインドウを切り替えて表示する方法
複数モーダルウインドウを切り替えて表示する方法

アニメーション

3D回転しながら開閉するモーダルウインドウを作る方法
右上から表示・左下へ閉じるモーダルウインドウの作り方
左上から表示・右下へ閉じるモーダルウインドウの作り方
左から表示・右へ閉じるモーダルウインドウの作り方
右から表示・左へ閉じるモーダルウインドウの作り方
下から表示・上へ閉じるモーダルウインドウの作り方
上から表示・下へ閉じるモーダルウインドウの作り方
ぼかしながら開閉するモーダルウインドウの作り方
回転しながら開閉するモーダルウインドウの作り方
フェードイン・フェードアウトで開閉するモーダルウインドウの作り方
バウンドしながら開閉するモーダルウインドウの作り方
ズームイン・ズームアウトで開閉するモーダルウインドウの作り方
上にスライドアウトして閉じるモーダルウインドウの作り方
下にスライドアウトして閉じるモーダルウインドウの作り方
右にスライドアウトして閉じるモーダルウインドウの作り方
左にスライドアウトして閉じるモーダルウインドウの作り方
画面上からスライドインするモーダルウインドウの作り方
画面左からスライドインするモーダルウインドウの作り方
画面右からスライドインするモーダルウインドウの作り方
画面下からスライドインするモーダルウインドウの作り方

デザイン

背景をぼかして表示するモーダルウインドウの作り方
ダークモード対応モーダルウインドウの作り方
全画面オーバーレイ型モーダルウインドウの作り方

初期状態

最初から表示されているモーダルウインドウの作り方

自動

×ボタンで閉じられるモーダルウインドウの作り方
指定時間後に自動で閉じるモーダルウインドウの作り方
一定時間操作がないと表示されるモーダルウインドウの作り方
スクロール位置で自動表示するモーダルウインドウの作り方
指定時間後に自動表示するモーダルウインドウの作り方

操作

モーダルウインドウ内のみキー操作可能にする方法
モーダルウインドウ表示中の背景スクロールを禁止する方法

状態維持

ページを移動しても開閉状態を記憶するモーダルウインドウの作り方
初回アクセス時のみ表示するモーダルウインドウの作り方

コンテンツ

PDFをモーダルウインドウに表示する方法
iframeをモーダルウインドウに表示する方法
Googleマップをモーダルウインドウに表示する方法
YouTube動画をモーダルウインドウに表示する方法
画像ギャラリーをモーダルウインドウで表示する方法
画像をモーダルウインドウに拡大表示する方法

入れ子

モーダルウインドウ内にモーダルウインドウを表示する方法

入力・検証

入力内容確認モーダルウインドウの作り方
商品一覧を絞り込むモーダルウインドウの作り方
会員登録フォーム付きモーダルウインドウの作り方
ログインフォーム付きモーダルウインドウの作り方
お問い合わせフォーム付きモーダルウインドウの作り方

データ操作

削除確認モーダルウインドウを作る方法

ナビゲーション

URLハッシュで開けるモーダルウインドウの作り方