iOSでcolorboxの背景を固定する

  • facebook
  • このエントリーをはてなブックマークに追加
  • Twitter

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'));
	}
});

前の記事

e☆イヤホンクリニックに宅配修理を依頼したけど、だんだん不安になってきた話

次の記事

WordPressのアップローダーからIllustratorデータ(拡張子ai)をアップロードする