jQuery

Nivo Lightboxでモーダル（Modal）ウインドウを作る方法

2023年1月3日 by single コメントはまだありません

Nivo Lightboxでモーダル（Modal）ウインドウを作る方法

サンプル

インラインHTML

インラインフレーム

IFrame（インラインフレーム）

インラインフレーム

Ajax

AJAX

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>jQuery Nivo Lightbox demo(3)</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nivo-lightbox/1.3.1/nivo-lightbox.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nivo-lightbox/1.3.1/themes/default/default.css">
   <!-- 最新のjQuery3などはだめ、古いのである必要あり -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/nivo-lightbox/1.3.1/nivo-lightbox.min.js"></script>
</style>
</head>
<body>
   <p>
      <h4>インラインHTML</h4>
      <a href="#content" data-lightbox-type="inline"  title="インラインHTML">インラインフレーム</a>
      <div id="content" style="display:none">インラインフレームの内容</div>
   </p>
   <p>
      <h4>IFrame（インラインフレーム）</h4>
      <a href="https://www.single-life.tokyo/" data-lightbox-type="iframe" title="タイトル" >インラインフレーム</a>
   </p>
   <p>
      <h4>Ajax</h4>
      <a href="/demo/niva_ajax.html" data-lightbox-type="ajax" title="Ajaxのタイトル" >AJAX</a>
   </p>
   <script type="text/javascript">
      $(document).ready(function(){
          $('a').nivoLightbox();
      }
      );
   </script>
</body>
</html>

「niva_ajax.html」（ajaxで読み込み内容）

<html>
<head>
</head>
<body>
<h3>Nivo Lightbox</h3>
<br />
Ajaxで取得しています。
</body>
</html>

デモ

Lightboxタイプ

data-lightbox-type

属性「data-lightbox-type」の値として、未指定の場合（デフォルトの場合）では、写真を読み込む設定ですが、それ以外の値を指定することもできます。

inline

HTMLの領域を表示させる場合は、値に『inline』を指定してください。

<a href="#content" data-lightbox-type="inline"  title="インラインHTML">インラインフレーム</a>
<div id="content" style="display:none">インラインフレームの内容</div>

『inline』を指定する場合は、アンカータグ（<a>）の属性「href」に対象オブジェクトのIDをシャープ（#）付きで指定してください。

iframe

別ページをインラインフレームで表示する場合には、値に『iframe』を指定してください。

<a href="https://www.single-life.tokyo/" data-lightbox-type="iframe" title="タイトル" >インラインフレーム</a>

アンカータグ（<a>）の属性「href」の値には、インラインフレームで表示したいページのURLを指定してください。

ajax

非同期でページを読み込みその内容をダイアログボックスに表示したい場合には、値『ajax』を指定してください。

<a href="/demo/niva_ajax.html" data-lightbox-type="ajax" title="Ajaxのタイトル" >AJAX</a>

ご参考

関連ページ