概要

基本Railsの記法に則り書いていきます！
１から全ての説明ではなく
その中であれ？どうやるの？と
疑問に思った点や実装に困った箇所を
ピックアップして紹介していきます♩

設定と準備

・Rails
・HTML
・CSS
・Javascript(jQuery)

↑上記の言語とフレームワークを使い
架空(自分で考えたテキトーなもの)のCafeの
HPを作っていこうと思います！

16日目の作業内容

・colorboxを導入しモーダルを作成

16日目の気になった箇所

モーダルを作成できたのは良いが
スクロールすると一緒にスクロールされて
モーダルが見えなくなってしまうの固定したい！

仮説

position: fixed;
などを使えば上手くいくのかな。

結論

調べてみたが理解するのが今の自分には非常に難しかったので
今回はどうすれば上手くいくのかだけの紹介になります。

どのような方法でも良いので
JSのファイルがモーダルを使っているHTMLで読み込めるようにしてください。
方法をしましてはcolorboxの導入に成功していることが前提なので、お分かりかと思いますが
拡張子の.jsをつけたファイルを作成しscriptタグで読み込むなどの方法になります。

今回、私はrailsでアプリを作成しているため、

app/javascript配下にmodal.jsという
ファイル(モーダルに関してなのでmodalとしましたが.js付ければ名前はなんでも可)
を作成し、

app/javascript/packs/application.js

require('jquery')
require("../jquery.colorbox-min.js")
require("../jquery.colorbox-ja.js")
require("../modal.js")

このように読み込ませています。

読み込みが成功したら、
作成したファイルに

modal.js

$(document).ready(function(){
  $(".iframe").colorbox({iframe:true, width:"90%", height:"90%",
  fixed: true,
    onOpen: function() {
      var ycoord = $(window).scrollTop();
      $('#colorbox').data('ycoord',ycoord);
      ycoord = ycoord * -1;
      $('body').css('position','fixed').css('left','0px').css('right','0px').css('top',ycoord + 'px');
    },
    onClosed: function() {
      $('body').css('position','').css('left','auto').css('right','auto').css('top','auto');
      $(window).scrollTop($('#colorbox').data('ycoord'));
    }
  });  $("#click").click(function(){
  $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
  return false;
  });
  });

このような記述をしてください。
正直、どこが何を示しているのかほとんどわからないので
コピペで出来なかったらお手上げです...。
iframeはクラス名を自由に変更が可能なので
クラス名を変えている方は
2行目の

$(".iframe")

この箇所を自分のクラス名に変える必要があるかもしれません。
少しでもお力になれたら幸いです。