All About オールアバウト
デジタル
  • パソコン・周辺機器
  • カメラ・AV機器
  • 携帯電話・スマートフォン
  • IT・インターネット
  1. All About
  2. デジタル
  3. IT・インターネット
  4. ホームページ作成
  5. Colorboxの使い方:jQueryで簡単モーダルウインドウ
この写真の記事へ

Colorboxの使い方:jQueryで簡単モーダルウインドウ(画像)(10ページ目)

更新日:2018年12月17日
西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

同一ページ内のボックスをオーバーレイ表示するサンプルページの表示例

同一ページ内のボックスをオーバーレイ表示するサンプルページの表示例

この写真の記事へ
現在のウェブページ上に小窓を重ねて(=モーダルウインドウをオーバーレイ表示して)、その中に補足情報を表示させる例
Twitterでユーザ名をクリックすると、オーバーレイ表示されるモーダルウインドウ内に、そのユーザのプロフィールページが表示される
現在のウェブページ上に小窓を重ねて(=モーダルウインドウをオーバーレイ表示して)、その中にAll AboutのHOMEページをを表示させた例
Colorbox配布サイト
その場で拡大画像を表示するLightbox系スクリプト
「jquery.colorbox-min.js」ファイルが、Colorboxの本体スクリプト
デザイン一式(CSSと画像群)をフォルダごと抜き出す
抜き出したファイルを自サイトへアップロード
外部サイトをオーバーレイ表示するサンプルページの表示例
同一ページ内のボックスをオーバーレイ表示するサンプルページの表示例
Windowsが表示する「このアプリがデバイスに変更を加えることを許可しますか?」の質問も、モーダルウインドウとして表示されている
現在のウェブページ全体を暗転させた上でモーダルウインドウを重ねて、その中に補足情報を表示させた例
Twitterでユーザ名をクリックすると、プロフィールページがモーダルウインドウのように表示される
その場で拡大画像を表示するLightbox系スクリプトも、モーダルウインドウのように見える小窓を生成する
現在のウェブページ全体を暗転させてモーダルウインドウを表示し、その中にAll Aboutのトップページを表示させた例

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる

人気記事ランキング

  • 1
    【HTML+CSS】ウインドウ幅に合わせて画像サイズを変化させる方法
    【HTML+CSS】ウインドウ幅に合わせて画像サイズを変化させる方法
    2021/12/22
  • 2
    短縮URLの作り方おすすめ3選!Googleの"goo.gl"は終了
    短縮URLの作り方おすすめ3選!Googleの"goo.gl"は終了
    2022/09/01
  • 3
    タブ機能の作り方!ページ移動せずに内容を切り替える
    タブ機能の作り方!ページ移動せずに内容を切り替える
    2022/12/26
  • 4
    移転先へ自動移動(転送/リダイレクト)させる方法
    移転先へ自動移動(転送/リダイレクト)させる方法
    2018/09/04
  • 5
    CSSのletter-spacingでHTMLの文字間隔を調整する方法
    CSSのletter-spacingでHTMLの文字間隔を調整する方法
    2018/12/17
ランキングをもっと見る

ホームページ作成

  • ホームページ作成の基本
  • ホームページ作成ソフトの選び方
  • HTML5とは
  • CSS3とは
  • HTML・スタイルシート(CSS)の基礎
他のテーマも見る

カテゴリー一覧

  • 住宅・不動産
  • マネー
  • 健康・医療
  • ビューティ
  • デジタル
  • 暮らし
  • 恋愛・結婚
  • ビジネス・学習
  • メンズスタイル
  • 旅行
  • 趣味
  • ファッション
  • グルメ
  • 車・バイク

ガイド関連

  • 専門家サーチ(ガイドを探す)
  • All Aboutガイド募集
  • ガイドへの仕事・取材依頼
  • 国民の決断

All Aboutサービス・メディア

  • All About ニュース
  • Best One
  • All About Japan
All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
  • 会社概要
  • 採用情報
  • 投資家情報
  • 広告掲載
  • 利用規約
  • プライバシーポリシー
  • All Aboutについて
  • 著作権・商標・免責
  • 当サイトの情報についての注意
  • サイトマップ
  • ヘルプ
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます