これに頭を悩ませています.. a)ユーザーがメニューなどと対話できるポップアップを用意し、ポップアップの外でクリック/タッチ(iPadなど)を閉じたい場合。問題は、「e.preventDefault();」を挿入した場合です。ポップアップとその親の背後にあるリンクを停止するには、ポップアップのコンテンツが iPad で機能しなくなりますが、デスクトップ ブラウザーでは正常に機能します....
誰か考えがありますか?!
<div id="divQuickCartDialogOverlay">
<div id="divQuickCartDialog">
<div id="overlayQuickBasket"><!--SELECT MENUS, BUTTONS ETC HERE --></div>
</div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function ()
{
// Initial call
setTimeout(basketExpiryCheck, 60000);
// old style quick basket
$('#divQuickCart').mouseleave(function() {
closeCart('mleave');
});
// hide cart dialog if user clicks on background div
$(document).on('click touchstart', function (e)
{
e.preventDefault();
var container = $("#divQuickCartDialog");
if (container.has(e.target).length === 0)
{
closeCartDialog();
}
});
checkBasketRefresh();
});
</script>
<style>
#overlayQuickBasket { margin:0 auto; }
body, html { height:100%; }
#divQuickCartDialog { height:100%;width:100%; }
</style>
<script>
$(function() {
$('#overlayQuickBasket').each(function() {
$(this).parent().css('position', 'relative');
$(this).css('position', 'absolute');
$(this).css('top', '50%');
$(this).css('left', '0px');
});
$(window).resize(function() {
var thisheight = Math.round(parseInt($('#overlayQuickBasket').outerHeight()) / 2);
$('#overlayQuickBasket').css('margin-top', '-' + thisheight + 'px');
if(parseInt($('#overlayQuickBasket').outerHeight()) > parseInt($('#overlayQuickBasket').parent().outerHeight())) {
$('#overlayQuickBasket').parent().outerHeight($('#overlayQuickBasket').outerHeight());
}
}).trigger('resize');
});
</script>