🎯 modaal デモページ

1. 基本的なインラインモーダル

最もシンプルな実装例です。ボタンをクリックするとモーダルウィンドウが開きます。

<a class="modal" href="#inline_1">モーダルを開く</a>
<div class="none" id="inline_1">
  <p>モーダルの内容</p>
</div>

2. 複数のモーダルを実装

1つのページに複数のモーダルを設置できます。IDを変えることで実装可能です。

3. 画像をモーダル表示

画像をクリックすると、モーダルで拡大表示されます。

<a class="modal-image" href="images/large.jpg">
  <img src="images/thumb.jpg" alt="サムネイル">
</a>

4. YouTube動画をモーダル表示

YouTube動画をモーダルで再生できます。

<a class="modal-video" href="https://www.youtube.com/watch?v=xxxxx">
  動画を見る
</a>

5. 外部サイトをiframeで表示

外部のウェブサイトをモーダル内に表示できます。

<a class="modal-iframe" href="https://example.com">
  外部サイトを表示
</a>

6. お問い合わせフォーム（実践例）

実務でよく使われる、お問い合わせフォームをモーダル表示する例です。

7. カスタムオプション付きモーダル

様々なオプションを設定したモーダルの例です。

$(".modal-custom").modaal({
  type: 'inline',
  width: 600,
  overlay_close: false,
  animation: 'fade'
});

8. フルスクリーンモーダル

画面全体に表示されるフルスクリーンモーダルです。

📌 実装時の注意点