0

これに頭を悩ませています.. 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>
4

1 に答える 1