lightbox(ライトボックス)って良く使われてますが、lightboxのイメージで別URLのページを表示してみます。
Contents
colorboxで表示させるためのCSSとJsファイルを読み込み、colorboxを使用するJavaScript記述
※colorbox.cssとjquery.colorbox.jsを読み込みます。colorboxで表示させるタグ要素のクラス.iframeとサイズを指定します。
<link rel="stylesheet" href="colorbox.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.colorbox.js"></script> <script><br /> $(document).ready(function(){<br /> $(".iframe").colorbox({iframe:true, width:"90%", height:"90%"});<br /> }); </script>
colorboxで表示させるための別URLページを指定したHTMLの記述
※以下のaタグを記述するだけです、
<a class="iframe" href="https://dad-union.com">このリンクをクリック</a>
jquery.colorbox.jsでightbox風に別ページ(iframe)を表示するデモページ
jquery.colorbox.jsでightbox風に別ページ(iframe)を表示
ソース元
その他、画像や動画(YouTube等)の表示も出来る様ですね。
冒頭でも言いましたがライトボックス風に表示して下さいって感じのアレです。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告