More than 5 years have passed since last update.

colorboxのiframe可変

note

Posted at 2019-11-14

colorboxのiframeを表示コンテンツに応じた可変サイズにするテストです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://yarnpkg.com/en/package/normalize.css">
<link rel="stylesheet" href="colorbox.css">
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script src="jquery.colorbox-min.js"></script>
<script>
$(function(){
  $(".iframe").colorbox({
    iframe: true,
    innerWidth: 600,// 幅初期設定
    innerHeight: 400,// 高さ初期設定
    onComplete : function() {
      $('#cboxLoadedContent').children('iframe').on('load',function(){
        var $iframe = $(this);

        // bodyは特定の幅を持たないので、主要ブロックから最大幅を取得
        var W = Math.max.apply(null, $iframe.contents().find('body').find('div,header,footer,main,section').map(function (){
                  return $(this).outerWidth();
                }).get());
        // ドキュメント(body)の高さを取得
        var H = $iframe.get(0).contentWindow.document.body.clientHeight;

        // リサイズ
        $iframe.colorbox.resize({
          innerWidth: W,
          innerHeight: H,
        });
      });
    }
  });
});
</script>
</head>
<body>
<a href="modal.html" class="iframe">open iframe modal</a>
</body>
</html>

modal.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>modal</title>
<meta name="viewport" content="width=device-width">
<style>
  body {
    margin: 0;
  }
  main {
    display: block;
    width: 500px;
    margin: auto;
    padding: 20px;
    background-color: #ccc;
    box-sizing: border-box;
  }
</style>
</head>
<body>
  <main>
    <p>colorbox iframe test</p>
  </main>
</body>

参考

以上、ありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up