Bootstrapのform付モーダルをiOS上で表示するには

WEB System

Bootstrapのモーダルはすごく便利。
ただ、form付モーダルをiOS上で表示させる際には注意が必要。入力部品を選択し、バーチャルキーボードを表示させたが最後、画面をスクロールさせるとモーダルじゃなくて背景の画面がスクロールしてしまう。これは、Bootstrapのバグで、ちゃんと公式サイトにも記述がある。そこには解決策も書かれていて、手動でモーダルのCSSを「position: absolute 」に変更してあげればいいらしい。ということで、モーダルを表示するJavaScriptを以下のように記述すれば解決した。

$("#mymodal").on("show.bs.modal", function(e) {
	if(navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {
		$(".modal").css({
			"position":"absolute",
			"marginTop": $(window).scrollTop() + "px",
			"bottom":"auto",
			"width":"95%"
		});
	}
});