iOSでcolorboxの背景を固定する
colorboxとはjQueryのプラグインです。画像やコンテンツをモーダルウィンドウで表示します。大変便利で使い勝手が良く、Web制作者ならば一度は触れた事があるプラグインだと思われます。問題が発生しても、ググれば大体が公式や有志の方々の知恵で解決できます。
colorbox公式
https://www.jacklmoore.com/colorbox/
しかし「iOSでの背景固定」については、問題解決に大変苦労しました。
- position:fixed;
- height:100%;
- overflow:hidden;
検索して出てくる解決策では解決できず。
どうにも手詰まりだったのですが、GitHubに寄せられた海外の方のおかげで解決しました。
https://github.com/jackmoore/colorbox/issues/757
HTML
<body> <div class="wrapper"> <a href="/hoge" class="colorbox"><img src="hoge.png"></a> </div> </body>
jQuery
$('. colorbox').colorbox({
/*オプション記入*/
fixed: true,
onOpen: function() {
var ycoord = $(window).scrollTop();
$('#colorbox').data('ycoord',ycoord);
ycoord = ycoord * -1;
$('.wrapper').css({
position: 'fixed',
left: '0px',
right: '0px',
top: ycoord + 'px'
},
onClosed: function() {
$('.wrapper').css({
position: 'relative',
left: 'auto',
right: 'auto',
top: 'auto'
});
$(window).scrollTop(jQuery('#colorbox').data('ycoord'));
}
});
MovableType／WordPressを使ったホームページ制作、機能追加や設置代行などの改修、システム開発、サイトの保守を手掛けております。
アナタが実現させたい機能、やりたい事をお聞かせいただけませんか？ そのイメージを一緒に実現しましょう！
お問い合わせは以下のページから!!