arrow_upward
closeサイドバー無

Colorboxを使う(iframeの出力)

Colorboxサイトからダウンロードしてきます。
後は設定してみます。
imagesフォルダは削除せずにcolorbox.cssと同位置に。

サンプルページ

<link rel="stylesheet" href="colorbox.css" />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="jquery.colorbox-min.js"></script>
<script>
$(function(){
    $(".iframe").colorbox({iframe:true, transition:"none", width:"40%", height:"40%"});
});
</script>
<body>
 <p><a class="iframe" href="ifream_c.html">テストページ表示</a></p>
</body>

 

閉じるボタンやリンクを自作したい場合は呼び出したいファイルのhtmlに

$('#btnclose').click(function () {
 parent.$.fn.colorbox.close();
 return false;
});
<a id="btnclose" href="#">閉じる</a>

return false;をすることでそこで終了するので閉じるの「#」のリンクを押した状態を阻止することができます。

閉じるボタンに関してはローカル環境(ブラウザ：chrome(管理者・--allow-file-access-from-filesを指定した状態でも))では反応しなかったため、localhostやサーバーにアップしてからテストしたほうがよさそうです。私の環境だけかもしれませんが。

 

2018/03/29:サンプルページの追加
2017/05/22:ページの作成

関連記事

0 件のコメント:

コメントを投稿