概要
基本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")
この箇所を自分のクラス名に変える必要があるかもしれません。
少しでもお力になれたら幸いです。
↧