Blog

HOME > Web > JQuery > 【jQuery】colorboxを使って現在のページ上に、別HTMLの内容を重ねて表示する方法（モーダルウィンドウ）

【jQuery】colorboxを使って現在のページ上に、別HTMLの内容を重ねて表示する方法（モーダルウィンドウ）

2017/02/08

JQuery

備忘録です。

いわゆるモーダルウィンドウの作成方法です。

参考サイト
現在のページ上に、別HTMLの内容を重ねて表示する方法

jQueryの「colorbox」を使います。

colorboxをダウンロード

必要なファイルをアップロード（例：colorboxディレクトリ）します。
■「jquery.colorbox-min.js」ファイル (本体スクリプト)
■「jquery.colorbox-ja.js」ファイル (日本語翻訳スクリプト)
■「example1」～「example5」フォルダのどれか (デザイン用ファイル群)

Colorboxを使いたいページ(HTMLソース)のhead要素内に、Colorboxの構成ファイルを読み込む記述を加えます。

<!-- ▼ColorboxのCSSを読み込む記述 -->
<link href="./colorbox/design1/colorbox.css" rel="stylesheet" />

<!-- ▼jQueryとColorboxのスクリプトを読み込む記述 -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="./colorbox/jquery.colorbox-min.js"></script>
<script src="./colorbox/jquery.colorbox-ja.js"></script>


Colorboxの適用対象の指定とオプションを記述する

<!-- ▼Colorboxの適用対象の指定とオプションの記述 -->
<script>
   $(document).ready(function(){
      $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
   });
</script>


width:"80%", height:"80%を任意で書き換えると表示サイズの変更ができます。

なお、小窓に表示させたい外部ページが複数個ある場合は、下記のようにグループ名を加えておくと、矢印ボタン[←][→]を使って連続的に切り替えられるようになります。

$(".iframe").colorbox({rel:'group1', iframe:true, width:"80%", height:"80%"});

※上記の「group1」の部分は、任意の文字列に変更できます。

html記述

<a class="iframe" href="**.html" title="**">ここをclick</a>

classでiframeを指定することによりモーダルウィンドウとして認識されます

リンク先、title、「ここをclick」については任意で書き換えてください。

モーダルウィンドウの表示については、下記サンプルページをご参照ください。

サンプル1
サンプル2
サンプル3
サンプル4
サンプル5


カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ